PHP开发之Jquery＋Ajax三级联动获取城市地区列表及源码

以下是以Thinkphp3.2框架代码为示例，不过学会变动的同行们，一看应该知道其原理，照样可以用于其他框架或者纯PHP代码。

html代码

请选择省份

{$vo.name}

请选择城市

{$vo.name}

请选择区域

{$vo.name}

js代码

$("#province_list").change(function(){

varpid=$(this).val();

$("#city").empty();

$("#area").empty();

if(pid==0){

$("#city").append('请选择城市');

$("#area").append('请选择区域');

returnfalse;

}else{

$("#area").append('请选择区域');

}

jQuery.ajax({

type:'GET',

url:"{:U('area/ajax_city_list')}",

data:encodeURI('pid='+pid),

dataType:'json',

success:function(data){

varcityList=data.data,optionList='请选择城市';

$.each(cityList,function(n,value){

optionList=optionList+""+value.name+"";

});

$("#city").append(optionList);

}

});

});

$("#city").change(function(){

varcid=$(this).val();

varhref="__APP__/Area/ajaxAreaList";

$("#area").empty();

if(cid==0){

$("#area").append('请选择区域');

returnfalse;

}else{

$("#area").append('请选择区域');

}

jQuery.ajax({

type:'GET',

url:href,

data:encodeURI('cid='+cid),

dataType:'json',

success:function(data){

varareaList=data.data,optionList;

$.each(areaList,function(n,value){

optionList=optionList+""+value.name+"";

});

$("#area").append(optionList);

}

});

});

php代码

publicfunctionajax_city_list(){

$pid=I('get.id');

if(!empty($pid)){

$list=city_list($pid);

$this->ajaxReturn($list,'成功获取城市列表！',1);

}else{

$this->ajaxReturn('','0',0);

}

}

publicfunctionajax_area_List(){

$cid=I('get.id');

if(!empty($cid)){

$list=area_list($cid);

$this->ajaxReturn($list,'成功获取区域列表！',1);

}else{

$this->ajaxReturn('','0',0);

}

}

php公共方法

functionprovince_list($limit=10,$order='sort'){

$Area=M('Area');

$map['pid']=0;

$list=$Area->where($map)->order()->limit()->select();

return$list;

}

functioncity_list($pid=0){

$Area=M('Area');

$map['pid']=$pid;

$map['cid']=0;

$list=$Area->where($map)->order()->limit()->select();

return$list;

}

functionarea_list($cid=0){

$Area=M('Area');

$map['cid']=$cid;

$list=$Area->where($map)->order()->limit()->select();

return$list;

}

由于时间关系，所以以上代码我就没有多做注释，等有时间我再完善，有不明白的同行们，可以留言一起讨论。