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;

}

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180209A0IJ3Z00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券