用php+mysql+ajax+jquery做省市区三级联动
// JavaScript Document//当页面内容都加载完才执行
$(document).ready(function(e) {
//加载三个下拉列表
$("#ssq").html("<select>
//加载显示数据
//1.加载省份
FillSheng();
//2.加载市
FillShi();
//3.加载区
FillQu();
//当省份选中变化，重新加载市和区
$("#sheng").change(function(){ //当元素的值发生改变时，会发生 change 事件,该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
//加载市
FillShi();
//加载区
FillQu();
})
//当市选中变化，重新加载区
$("#shi").change(function(){
//加载区
FillQu();
})
});
//加载省份信息
function FillSheng()
{
//取父级代号
var pcode ="0001";
//根据父级代号查数据
$.ajax({
//取消异步，也就是必须完成上面才能走下面
async:false,
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success: function(data){
var str="";
//遍历数组，把它放入sj
for(var sj in data){
//<option value="11">北京</option>
str=str+"<option value='"+data.AreaCode+"'>"+data.AreaName +"</option>";
}
$("#sheng").html(str);
}
});
}
//加载市信息
function FillShi()
{
//取父级代号
var pcode =$("#sheng").val();
//根据父级代号查数据
$.ajax({
//取消异步，也就是必须完成上面才能走下面
async:false,
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success: function(data){
var str="";
//遍历数组，把它放入sj
for(var sj in data){
//<option value="11">北京</option>
str=str+"<option value='"+data.AreaCode+"'>"+data.AreaName +"</option>";
}
$("#shi").html(str);
}
});
}
//加载区信息
function FillQu()
{
//取父级代号
var pcode =$("#shi").val();
//根据父级代号查数据
$.ajax({
//不需要取消异步
url:"load.php",
data:{pcode:pcode},
type:"POST",
dataType:"JSON",
success: function(data){
var str="";
//遍历数组，把它放入sj
for(var sj in data){
//<option value="11">北京</option>
str=str+"<option value='"+data.AreaCode+"'>"+data.AreaName +"</option>";
}
$("#qu").html(str);
}
});
}
页:
[1]