使用php ajax实现一个省市区的三级联动-CSDN博客

要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

Ajax加载数据

完成效果如下：

实现三级联动以后可能还会用到所以可以将其封装为一个方法

新建一个JS页面

代码如下：

// JavaScript Document
$(document).ready(function(e) {
    
	//向DIV里面扔三个下拉
	var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
	$("#sanji").html(str);
	
	FillSheng();
	FillShi();
	FillQu();
	
	$("#sheng").change(function(){
			FillShi();
			FillQu();
		})
	$("#shi").change(function(){
			FillQu();
		})
});

//填充省的方法
function FillSheng()
{
	var pcode = "0001";
	$.ajax({
			async:false,
			url:"chuli.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 FillShi()
{
	var pcode = $("#sheng").val();
	$.ajax({
			async:false,
			url:"chuli.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 FillQu()
{
	var pcode = $("#shi").val();
	$.ajax({
			url:"chuli.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);
				}
		});
}

async:false ：
             async 可以解释为异步  async:false 就是不异步 也就是同步了 async:true则相反

async:true

 async:false

  
 处理页面：

 <?php
include("DBDA.class.php");
$db = new DBDA();
$code = $_POST["pcode"];
$sql="select AreaCode,AreaName from chinastates where ParentAreaCode = '{$code}'";
echo $db->StrQuery($sql);

　　PHP页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>

<body>
<div id="sanji">
</div>
</body>
</html>

最终效果：