zoukankan      html  css  js  c++  java
  • Ajax三级联动

    全国省市县查询

    html代码

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	<script src="../jquery-1.11.2.min.js"></script>
        <script src="sanji.js"></script>
    </head>
    
    <body>
        <h1>区域查询</h1>
        <div id="sanji"></div>
    </body>
    </html>
    

     js代码实现各区市随省的变化而变化

    $(document).ready(function(e) {
        $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");//将三个下拉的字符串交给前边的div
        tiansheng();//加载省的数据
        tianshi();//加载市的数据
        tianqu();//加载区 的数据
        
        $("#sheng").change(function(){//变化后执行                
    		tianshi();//重新加载市
    		tianqu();//重新加载区
        })
        $("#shi").change(function(){//变化后执行
    		tianqu();//加载区的数据
        })
    });
    
    function tiansheng(){
    	var pcode = "0001"; //找出省的父级代号
    	$.ajax({
    		async:false,//同步加载
    		url:"states.php",
    		data:{pcode:pcode},
    		type:"POST",
    		dataType:"TEXT",
    		success: function(data){             
    		var hang = data.split("|");//拆分行   
    		var str = "";
    			for(var i=0;i<hang.length;i++){
    				var lie = hang[i].split("^");//拆分列         
    				str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";    
    			}
    			$("#sheng").html(str); 
    		}
    	});
    }
    
    function tianshi(){
        var pcode = $("#sheng").val();//找市的父级代号,省选中项的值
        $.ajax({
    		async:false,//同步加载
    		url:"states.php",
    		data:{pcode:pcode},
    		type:"POST",
    		dataType:"TEXT",
    		success: function(data){
    			var hang = data.split("|");
    			var str = "";
    			for(var i=0;i<hang.length;i++){
    				var lie = hang[i].split("^");
    				str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    			}
    			$("#shi").html(str);
    	    }
    	});
    }
    
    function tianqu(){
        var pcode = $("#shi").val();//找区的父级代号,市选中项的值
        $.ajax({
    		url:"states.php",
    		data:{pcode:pcode},
    		type:"POST",
    		dataType:"TEXT",
    		success: function(data){
    			var hang = data.split("|");
    			var str = "";
    				for(var i=0;i<hang.length;i++){
    					var lie = hang[i].split("^");
    					str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    				}
    				$("#qu").html(str);
    		}
        });
    }
    

     处理页面

    <?php
    $pcode = $_POST["pcode"];
    require "DBDA.class.php";
    $db = new DBDA();
    $sql = "select * from chinastates where parentareacode='{$pcode}'";
    echo $db->strquery($sql);
    

     DBDA封装功能

    <?php
    class DBDA{
    	public $host="localhost"; //服务器地址
    	public $uid="root"; //用户名
    	public $pwd="123"; //密码
    	public $dbname="crud"; //数据库名称
    	public function query($sql,$type=0){
    		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
    		$result = $db->query($sql);
    		if($type){
    			return $result;
    		}else{
    			return $result->fetch_all();
    		}
    	}
    	public function strquery($sql,$type=0){
    		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
    		$result = $db->query($sql);
    		if($type){
    			return $result;
    		}else{
    			$arr = $result->fetch_all();
    			$str ="";
    			foreach($arr as $v){
    				$str .= implode("^",$v)."|";
    			}
    			$str = substr($str,0,strlen($str)-1);
    			return $str;
    		}
    	}
    }
    
  • 相关阅读:
    Liferay 6.2 改造系列之十五:修改默认可用语言
    Liferay 6.2 改造系列之十七:当Portlet无权限时,不显示错误信息
    Liferay 6.2 改造系列之十四:修改组织的表单内容
    Liferay 6.2 改造系列之十三:修改用户编辑页面表单内容
    Liferay 6.2 改造系列之十一:默认关闭CDN动态资源
    matlab向量的排序(自写函数)
    matlab求一个矩阵中各元素出现的个数(归一化)
    matlab求矩阵的鞍点
    matlab求矩阵、向量的模
    matlab求最大公约数和最小公倍数
  • 原文地址:https://www.cnblogs.com/navyouth/p/8376522.html
Copyright © 2011-2022 走看看