码迷,mamicode.com
首页 > Web开发 > 详细

Ajax三级联动

时间:2018-01-29 16:10:20      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:etc   jquery   三级   min   select   sub   class   字符   +=   

全国省市县查询

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;
		}
	}
}

 

Ajax三级联动

标签:etc   jquery   三级   min   select   sub   class   字符   +=   

原文地址:https://www.cnblogs.com/navyouth/p/8376522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!