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 });
时间： 2024-10-07 06:52:14