以下是以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;
}由于时间关系,所以以上代码我就没有多做注释,等有时间我再完善,有不明白的同行们,可以留言一起讨论。