JS省市区联动效果
省市区联动下拉效果在WEB中应用非常广泛，尤其在电商网站最为常见。一般使用Ajax实现无刷新下拉联动。利用jQuery，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。
首先我们可以看看自定义参数配置项如下：
参数配置如下：
接下来HTML代码如下：
<div id="city_4"> <select class="prov" id="prov4"></select> <select class="city" disabled="disabled" id="city4"></select> <select class="dist" disabled="disabled" id="area4"></select> </div>
如果没有三级联动的话 那么区的HTML代码可以省略掉！
调用非常简单如下：
new CitySelect({ provId : "#prov4", cityId : '#city4', areaId : '#area4', prov:"湖南", city:"长沙" });
废话也不多说，贴代码如下：
HTML代码：
<div id="main"> <div class="demo"> <h3>直接调用</h3> <p>二级联动，默认选项为：请选择</p> <div id="city_1"> <select class="prov" id="prov1"></select> <select class="city" disabled="disabled" id="city1"></select> </div> <p>三级联动，默认省份：北京，隐藏无数据的子级select</p> <div id="city_2"> <select class="prov" id="prov2"></select> <select class="city" disabled="disabled" id="city2"></select> <select class="dist" disabled="disabled" id="area2"></select> </div> </div> <div class="demo"> <h3>设置省份、城市、地区（县）的默认值</h3> <p>二级联动</p> <div id="city_3"> <select class="prov" id="prov3"></select> <select class="city" disabled="disabled" id="city3"></select> </div> <p>三级联动</p> <div id="city_4"> <select class="prov" id="prov4"></select> <select class="city" disabled="disabled" id="city4"></select> <select class="dist" disabled="disabled" id="area4"></select> </div> </div> <div class="demo"> <h3>自定义下拉选项</h3> <div id="city_5"> <select class="prov" id="prov5"></select> <select class="city" disabled="disabled" id="city5"></select> <select class="dist" disabled="disabled" id="area5"></select> </div> </div> </div>
JS代码如下：
/** * JS省市区联动 * @constructor CitySelect * @author tugenhua * @time 2014-2-22 * @email [email protected] */ function CitySelect(options) { this.config = { url : "js/city.min.js", provId : '#prov', cityId : '#city', areaId : '#area', prov : null, city : null, area : null, required : true }; this.cache = { select_prehtml : '', // 下拉框默认选项 city_json : '' // 城市json }; this.init(options); } CitySelect.prototype = { constructor : CitySelect, init: function(options) { this.config = $.extend(this.config, options || {}); var self = this, _config = self.config, _cache = self.cache; _cache.select_prehtml = _config.required ? '' : "<option value=''>请选择</option>"; // 设置省市的数据 if(typeof(_config.url) == 'string') { $.getJSON(_config.url, function(json) { _cache.city_json = json; self._provFunc(); }); }else { _cache.city_json = _config.url; self._provFunc(); } }, /* * 渲染省份函数 * @method _provFunc */ _provFunc: function() { var self = this, _config = self.config, _cache = self.cache; var html = _cache.select_prehtml; // 遍历 获取省份 $(_cache.city_json.citylist).each(function(i,prov){ html += "<option value='"+prov.p+"'>"+prov.p+"</option>"; }); $(_config.provId).html(html); /* * 若有传入省份与市级的值，则选中。（setTimeout为兼容IE6而设置） * 发现取到的selectedIndex老是前面一次 */ t && clearTimeout(t); var t = setTimeout(function(){ if(_config.prov != null) { $(_config.provId).val(_config.prov); self._cityStart(); setTimeout(function(){ if(_config.city != null) { $(_config.cityId).val(_config.city); self._areaStart(); setTimeout(function(){ if(_config.area != null) { $(_config.areaId).val(_config.area); } },1); } },1); } },1); // 选择省份时发生事件 $(_config.provId).unbind('change').bind('change',function(){ self._cityStart(); }); // 选择市级时发生事件 $(_config.cityId).unbind('change').bind('change',function(){ self._areaStart(); }); }, /* * 渲染市函数 * @method _cityStart */ _cityStart: function() { var self = this, _config = self.config, _cache = self.cache; var prov_id = $(_config.provId).get(0).selectedIndex; if(!_config.required){ prov_id--; }; $(_config.cityId).empty().attr("disabled",true); $(_config.areaId).empty().attr("disabled",true); if(prov_id < 0 || typeof(_cache.city_json.citylist[prov_id].c)=="undefined"){ return; } var html = _cache.select_prehtml; $.each(_cache.city_json.citylist[prov_id].c,function(i,city){ html += "<option value='"+city.n+"'>"+city.n+"</option>"; }); $(_config.cityId).html(html).attr('disabled',false); self._areaStart(); }, /* * 渲染区函数 * @method _areaStart */ _areaStart: function(){ var self = this, _config = self.config, _cache = self.cache; var prov_id=$(_config.provId).get(0).selectedIndex, city_id=$(_config.cityId).get(0).selectedIndex; if(!_config.required){ prov_id--; city_id--; }; $(_config.areaId).empty().attr("disabled",true); if(prov_id<0||city_id<0||typeof(_cache.city_json.citylist[prov_id].c[city_id].a)=="undefined"){ return; }; var html = _cache.select_prehtml; $.each(_cache.city_json.citylist[prov_id].c[city_id].a,function(i,area){ html += "<option value='"+area.s+"'>"+area.s+"</option>"; }); $(_config.areaId).html(html).attr('disabled',false); } };
调用如下：
$(function(){ new CitySelect({ prov:'北京', provId : "#prov1", cityId : '#city1' }); new CitySelect({ provId : "#prov2", cityId : '#city2', areaId : '#area2' }); new CitySelect({ provId : "#prov3", cityId : '#city3' }); new CitySelect({ provId : "#prov4", cityId : '#city4', areaId : '#area4', prov:"湖南", city:"长沙" }); new CitySelect({ provId : "#prov5", cityId : '#city5', areaId : '#area5' }); });