1.效果图
2.联动js
1 /** 2 * jquery.choosearea.js - 地区联动封装 3 */ 4 ; (function ($) { 5 var choosearea = function (options) { 6 this.set = $.extend({ 7 dataUrl: "/Content/Js/city_code.js", 8 selectDomId: { 9 province: "a", 10 city: "b", 11 county: "c" 12 }, 13 data: null, 14 initAreaIds: { 15 Province: 0, 16 City: 0, 17 County: 0 18 }, 19 eventInterface: { 20 renderProvinceList: function (list, selectedId) { 21 this.jq_province.empty().append($(this.ProvinceListHtml(list, selectedId, "请选择省"))); 22 }, 23 renderCityList: function (list, selectedId, isInit) { 24 var city = this.jq_city; 25 isInit = typeof (isInit) == "undefined" ? false : true; 26 city.empty().append($(this.CityListHtml(list, selectedId, "请选择市"))); 27 }, 28 renderCountyList: function (list, selectedId, isInit) { 29 var optionsHtml = this.CountyListHtml(list, selectedId, "请选择县"); 30 var county = this.jq_county; 31 isInit = typeof (isInit) == "undefined" ? false : true; 32 county.empty().append($(optionsHtml)); 33 }, 34 onchanged: function (cityId) { 35 36 } 37 } 38 39 }, options); 40 this.provinceList = []; 41 this.cityList = []; 42 this.countyList = []; 43 this.jq_province = $("#" + this.set.selectDomId.province); 44 this.jq_city = $("#" + this.set.selectDomId.city); 45 this.jq_county = $("#" + this.set.selectDomId.county); 46 this._init(); 47 }; 48 choosearea.prototype = {}; 49 choosearea.fn = choosearea.prototype; 50 choosearea.fn._init = function () { 51 var _this = this; 52 $.get(_this.set.dataUrl, {}, function (datajson) { 53 _this.set.data = datajson 54 _this._setAreaList(); 55 _this._initRender(_this.set.initAreaIds.Province, _this.set.initAreaIds.City, _this.set.initAreaIds.County); 56 _this._initEvents(); 57 }, "json"); 58 }; 59 //设置地区列表 60 choosearea.fn._setAreaList = function () { 61 this.provinceList = this.set.data.provinceList; 62 this.cityList = this.set.data.cityList; 63 this.countyList = this.set.data.countyList; 64 }; 65 66 //初始化渲染 67 choosearea.fn._initRender = function (provinceId, cityId, countyId) { 68 69 this.set.eventInterface.renderProvinceList.call(this, this.provinceList, provinceId); 70 var cityList = $.grep(this.cityList, function (n, i) { 71 return n.ProID == provinceId; 72 }); 73 this.set.eventInterface.renderCityList.call(this, cityList, cityId, true); 74 var countyList = $.grep(this.countyList, function (n, i) { 75 return n.CityID == cityId; 76 }); 77 this.set.eventInterface.renderCountyList.call(this, countyList, countyId, true); 78 }; 79 80 //渲染列表 81 choosearea.fn.ProvinceListHtml = function (list, selectedId, firstTips) { 82 firstTips = firstTips || ""; 83 var selectedAttr = selectedId == 0 ? " selected='selected'" : ""; 84 var optionsHtml = firstTips != "" ? "<option value='0' " + selectedAttr + ">" + firstTips + "</option>" : ""; 85 86 if (typeof (list) != "undefined") { 87 $.each(list, function (i, city) { 88 var selAttr = selectedId == city.ProID ? " selected='selected'" : ""; 89 optionsHtml += "<option value='" + city.ProID + "' " + selAttr + ">" + city.ProName + "</option>"; 90 }); 91 }; 92 return optionsHtml; 93 }; 94 //渲染列表 95 choosearea.fn.CityListHtml = function (list, selectedId, firstTips) { 96 firstTips = firstTips || ""; 97 var selectedAttr = selectedId == 0 ? " selected='selected'" : ""; 98 var optionsHtml = firstTips != "" ? "<option value='0' " + selectedAttr + ">" + firstTips + "</option>" : ""; 99 100 if (typeof (list) != "undefined") { 101 $.each(list, function (i, city) { 102 var selAttr = selectedId == city.CityID ? " selected='selected'" : ""; 103 optionsHtml += "<option value='" + city.CityID + "' " + selAttr + ">" + city.CityName + "</option>"; 104 }); 105 }; 106 return optionsHtml; 107 }; 108 //渲染列表 109 choosearea.fn.CountyListHtml = function (list, selectedId, firstTips) { 110 firstTips = firstTips || ""; 111 var selectedAttr = selectedId == 0 ? " selected='selected'" : ""; 112 var optionsHtml = firstTips != "" ? "<option value='0' " + selectedAttr + ">" + firstTips + "</option>" : ""; 113 //console.log(list); 114 if (typeof (list) != "undefined") { 115 $.each(list, function (i, city) { 116 var selAttr = selectedId == city.Id ? " selected='selected'" : ""; 117 optionsHtml += "<option value='" + city.Id + "' " + selAttr + ">" + city.DisName + "</option>"; 118 }); 119 }; 120 return optionsHtml; 121 }; 122 //初始化事件 123 choosearea.fn._initEvents = function () { 124 var province = this.jq_province; 125 var city = this.jq_city; 126 var county = this.jq_county; 127 var _this = this; 128 province.change(function () { 129 var id = parseInt($(this).val()); 130 var cityList = $.grep(_this.cityList, function (n, i) { 131 return n.ProID == id; 132 }); 133 _this.set.eventInterface.renderCityList.call(_this, cityList, 0); 134 _this.set.eventInterface.renderCountyList.call(_this, [], 0, false); 135 }); 136 137 city.change(function () { 138 var id = parseInt($(this).val()); 139 var countyList = $.grep(_this.countyList, function (n, i) { 140 return n.CityID == id; 141 }); 142 _this.set.eventInterface.renderCountyList.call(_this, countyList, 0, false); 143 }); 144 }; 145 $.choosearea = choosearea; 146 })(jQuery);
3.json数据
http://files.cnblogs.com/files/youngerliu/city_code.js
4.使用方法
默认选择
new $.choosearea({ selectDomId: { province: "selProvince", city: "selCity", county: "selCounty" }, initAreaIds: {Province:"0",City:"0",County:"0"} });
指定选择
1 new $.choosearea({ 2 selectDomId: { 3 province: "selProvince", 4 city: "selCity", 5 county: "selCounty" 6 }, 7 initAreaIds: {Province:"1",City:"1",County:"9"} 8 });