三级地区级联筛选

2019独角兽企业重金招聘Python工程师标准>>>

//数据结构
region_id parent_id region_name region_type

//表单结构
<select name="province_id" id="province_id" class="input-small">
            <option value="">省</option>
          </select>
          <select name="city_id" id="city_id" class="input-small">
            <option>市</option>
          </select>
          <select name="area_id" id="area_id" class="input-small">
            <option>区</option>
</select>

 //js处理
<script>
/* 地区加载 */
var province_id=0;
var city_id=0;
var area_id=0;

var province=$('#province_id');
var city=$('#city_id');
var area=$('#area_id');
$('<option value="">请选择..</option>').appendTo(city);
$('<option value="">请选择..</option>').appendTo(area);
	
var loadRegion=function(parent_id,region_type,obj,callback){
	$.getJSON('<?php echo url('common/region');?>',
		{parent_id:parent_id,region_type:region_type},
		function(res){
			obj.empty();
			$('<option value="">请选择..</option>').appendTo(obj);
			for(var i=0;i<res.length;i++){
				$('<option value="'+res[i]['region_id']+'">'+res[i]['region_name']+'</option>').appendTo(obj);
			}
			if(callback){
				callback();
			}
		}
	);
}
province.change(function(){
	loadRegion($(this).val(),2,city,function(){
		loadRegion(city.val(),3,area);
	});
	

});
city.change(function(){
	loadRegion($(this).val(),3,area);

});

var province_callback=function(){
	if(province_id>0){
		province.val(province_id);
		loadRegion(province_id,2,city,function(){
			if(city_id>0){
				city.val(city_id);
				loadRegion(city_id,3,area,function(){
					area.val(area_id);
				});
			}
		});
	}
}
//初始化
loadRegion(1,1,province,province_callback);
</script>

转载于:https://my.oschina.net/sharesuiyue/blog/269145