Jquery+Ajax三级联动获取城市地区列表

以下是以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>  &nbsp;

<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>  &nbsp;

<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;
}


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

相关文章