以下是以Thinkphp3.2框架代码为示例,不过学会变动的同行们,一看应该知道其原理,照样可以用于其他框架或者纯PHP代码。
html代码
<select name="data[pid]" id="province_list"> <option value="0" level="0">请选择省份</option> <volist name=":province_list()" id="vo"> <option value="{$vo.id}" >{$vo.name}</option> </volist> </select> <select name="data[cid]" id="city_list"> <option value="0" level="0">请选择城市</option> <volist name=":city_list($info['pid'])" id="vo"> <option value="{$vo.id}" >{$vo.name}</option> </volist> </select> <select name="data[aid]" id="area_list"> <option value="0" level="0">请选择区域</option> <volist name=":area_list($info['cid'])" id="vo"> <option value="{$vo.id}" >{$vo.name}</option> </volist> </select>
js代码
$("#province_list").change(function(){ var pid = $(this).val(); $("#city").empty(); $("#area").empty(); if(pid==0){ $("#city").append('<option value="0">请选择城市</option>'); $("#area").append('<option value="0">请选择区域</option>'); return false; }else{ $("#area").append('<option value="0">请选择区域</option>'); } jQuery.ajax({ type:'GET', url:"{:U('area/ajax_city_list')}", data:encodeURI('pid='+pid), dataType:'json', success:function(data){ var cityList = data.data,optionList='<option value="0">请选择城市</option>'; $.each(cityList,function(n,value) { optionList = optionList+"<option value='"+value.id+"'>"+value.name+"</option>"; }); $("#city").append(optionList); } }); }); $("#city").change(function(){ var cid = $(this).val(); var href = "__APP__/Area/ajaxAreaList"; $("#area").empty(); if(cid==0){ $("#area").append('<option value="0">请选择区域</option>'); return false; }else{ $("#area").append('<option value="0">请选择区域</option>'); } jQuery.ajax({ type:'GET', url:href, data:encodeURI('cid='+cid), dataType:'json', success:function(data){ var areaList = data.data,optionList; $.each(areaList,function(n,value) { optionList = optionList+"<option value='"+value.id+"'>"+value.name+"</option>"; }); $("#area").append(optionList); } }); });
php代码
public function ajax_city_list(){ $pid = I('get.id'); if( !empty($pid) ){ $list = city_list($pid); $this->ajaxReturn($list,'成功获取城市列表!',1); }else{ $this->ajaxReturn('','0',0); } } public function ajax_area_List(){ $cid = I('get.id'); if( !empty($cid) ){ $list = area_list($cid); $this->ajaxReturn($list,'成功获取区域列表!',1); }else{ $this->ajaxReturn('','0',0); } }
php公共方法
function province_list($limit=10,$order='sort'){ $Area = M('Area'); $map['pid'] = 0; $list = $Area->where($map)->order()->limit()->select(); return $list; } function city_list($pid=0){ $Area = M('Area'); $map['pid'] = $pid; $map['cid'] = 0; $list = $Area->where($map)->order()->limit()->select(); return $list; } function area_list($cid=0){ $Area = M('Area'); $map['cid'] = $cid; $list = $Area->where($map)->order()->limit()->select(); return $list; }
由于时间关系,所以以上代码我就没有多做注释,等有时间我再完善,有不明白的同行们,可以留言一起讨论。