省市县三级联动(jqurey+json)

Posted 2020-07-26

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);

View Code

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             });