首页 > JS专栏 > PHP+JS打造三级地区联动表单
2016
06-20

PHP+JS打造三级地区联动表单

HTML部分:

<select class="select-30" name="prov" id="vprov"></select>
<select class="select-30" name="city" id="vcity">
    <option value="">请选择城市</option>
</select>
<select class="select-30" name="region" id="vregion">
    <option value="">请选择区域</option>
</select>

JS部分:

$("select[name=prov]").change(function(){//选择省
	var prov_ids = $(this).val();
	$.ajax({
		type:'post',
		url:site_url+'/index.php?act=shopmap&op=area_list',
		data:{area_id:prov_ids},
		dataType:'json',  	
		success:function(data){
			var city_html = '<option value="">请选择...</option>';
			for(var i=0;i<data.area_list.length;i++){
				city_html+='<option value="'+data.area_list[i].area_id+'">'
				+data.area_list[i].area_name+'</option>';
			}
			$("select[name=city]").html(city_html);
			$("select[name=region]").html('<option value="">请选择...</option>');
		 }
	});
});

$("select[name=city]").change(function(){//选择城市
	var city_ids = $(this).val();
	$.ajax({
		type:'post',
		url:site_url+'/index.php?act=shopmap&op=area_list',
		data:{area_id:city_ids},
		dataType:'json',  	
		success:function(data){
			var region_html = '<option value="">请选择...</option>';
			for(var i=0;i<data.area_list.length;i++){
				region_html+='<option value="'+data.area_list[i].area_id+'">'
				+data.area_list[i].area_name+'</option>';
			}
			$("select[name=region]").html(region_html);
		}
	});
});	

PHP部分:

public function area_listOp() {
        $area_id = intval($_POST['area_id']);

        $model_area = Model('area');

        $condition = array();
        if($area_id > 0) {
            $condition['area_parent_id'] = $area_id;
        } else {
            $condition['area_deep'] = 1;
        }
        $area_list = $model_area->getAreaList($condition, 'area_id,area_name');
	echo json_encode(array('area_list'=>$area_list));
}



留下一个回复