AJax 三级联动
1、主页面
<title>无标题文档</title> <script src="../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> </head> <body> <!--为了方便以后使用，我们在主页面仅仅写一个div，新建一个页面写script代码，将其设置成为一个插件，方便以后的调用--> <div id="sanji"></div> </body> </html>
2、script代码
// JavaScript Document
$(document).ready(function(e) {
//写三个select下拉列表
var zhuti = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
$("#sanji").html(zhuti);
//填充省
FillSheng();
//填充市
FillShi();
//填充区
FillQu();
//当省选中变化的时候去填充市和区
$("#sheng").change(function(){
//填充市
FillShi();
//填充区
FillQu();
})
//当市选中变化的时候去填充区
$("#shi").change(function(){
//填充区
FillQu();
})
});
//填充省的方法
function FillSheng()
{
//省的父级代号
var pcode = "0001";
//调用AJAX
$.ajax({
async:false, //关闭异步，开启同步
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
//拆分返回的字符串，得到行的数组
var hang = data.trim().split("|");
var str = "";
for(var i=0; i<hang.length;i++)
{
//返回列的数组
var lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#sheng").html(str);
}
});
}
//填充市的方法
function FillShi()
{
//取到市的父级代号
var pcode = $("#sheng").val();
//调用AJAX
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.trim().split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
//填充区的方法
function FillQu()
{
//找到区的父级代号
var pcode = $("#shi").val();
//调用AJAX
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.trim().split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
});
}
3、处理页面
我们从数据库中查询行政区，是根据父级代号查询子级区域，因此，在整个过程中，我们只需要写一个php处理页面，之后反复调用即可
<?php
include("../DBDA.php");
$db = new DBDA();
//接收父级代号
$pcode = $_POST["pcode"];
//根据父级代号查子级区域
$sql = "select * from ChinaStates where ParentAreaCode='{$pcode}'";
echo $db->StrQuery($sql);
?>
