69 lines
258 KiB
JavaScript
69 lines
258 KiB
JavaScript
|
/**
|
||
|
|
* 省市区三级联动选择
|
||
|
|
*/
|
||
|
|
(function ($) {
|
||
|
|
|
||
|
|
// 所有地区
|
||
|
|
var REGIONS =
|
||
|
|
|
||
|
|
{"1":{"id":1,"pid":0,"name":"\u5317\u4eac\u5e02","level":1,"city":{"2":{"id":2,"pid":1,"name":"\u5317\u4eac\u5e02","level":2,"region":{"3":{"id":3,"pid":2,"name":"\u4e1c\u57ce\u533a","level":3},"4":{"id":4,"pid":2,"name":"\u897f\u57ce\u533a","level":3},"5":{"id":5,"pid":2,"name":"\u671d\u9633\u533a","level":3},"6":{"id":6,"pid":2,"name":"\u4e30\u53f0\u533a","level":3},"7":{"id":7,"pid":2,"name":"\u77f3\u666f\u5c71\u533a","level":3},"8":{"id":8,"pid":2,"name":"\u6d77\u6dc0\u533a","level":3},"9":{"id":9,"pid":2,"name":"\u95e8\u5934\u6c9f\u533a","level":3},"10":{"id":10,"pid":2,"name":"\u623f\u5c71\u533a","level":3},"11":{"id":11,"pid":2,"name":"\u901a\u5dde\u533a","level":3},"12":{"id":12,"pid":2,"name":"\u987a\u4e49\u533a","level":3},"13":{"id":13,"pid":2,"name":"\u660c\u5e73\u533a","level":3},"14":{"id":14,"pid":2,"name":"\u5927\u5174\u533a","level":3},"15":{"id":15,"pid":2,"name":"\u6000\u67d4\u533a","level":3},"16":{"id":16,"pid":2,"name":"\u5e73\u8c37\u533a","level":3},"17":{"id":17,"pid":2,"name":"\u5bc6\u4e91\u53bf","level":3},"18":{"id":18,"pid":2,"name":"\u5ef6\u5e86\u53bf","level":3}}}}},"19":{"id":19,"pid":0,"name":"\u5929\u6d25\u5e02","level":1,"city":{"20":{"id":20,"pid":19,"name":"\u5929\u6d25\u5e02","level":2,"region":{"21":{"id":21,"pid":20,"name":"\u548c\u5e73\u533a","level":3},"22":{"id":22,"pid":20,"name":"\u6cb3\u4e1c\u533a","level":3},"23":{"id":23,"pid":20,"name":"\u6cb3\u897f\u533a","level":3},"24":{"id":24,"pid":20,"name":"\u5357\u5f00\u533a","level":3},"25":{"id":25,"pid":20,"name":"\u6cb3\u5317\u533a","level":3},"26":{"id":26,"pid":20,"name":"\u7ea2\u6865\u533a","level":3},"27":{"id":27,"pid":20,"name":"\u4e1c\u4e3d\u533a","level":3},"28":{"id":28,"pid":20,"name":"\u897f\u9752\u533a","level":3},"29":{"id":29,"pid":20,"name":"\u6d25\u5357\u533a","level":3},"30":{"id":30,"pid":20,"name":"\u5317\u8fb0\u533a","level":3},"31":{"id":31,"pid":20,"name":"\u6b66\u6e05\u533a","level":3},"32":{"id":32,"pid":20,"name":"\u5b9d\u577b\u533a","level":3},"33":{"id":33,"pid":20,"name":"\u6ee8\u6d77\u65b0\u533a","level":3},"34":{"id":34,"pid":20,"name":"\u5b81\u6cb3\u53bf","level":3},"35":{"id":35,"pid":20,"name":"\u9759\u6d77\u53bf","level":3},"36":{"id":36,"pid":20,"name":"\u84df\u53bf","level":3}}}}},"37":{"id":37,"pid":0,"name":"\u6cb3\u5317\u7701","level":1,"city":{"38":{"id":38,"pid":37,"name":"\u77f3\u5bb6\u5e84\u5e02","level":2,"region":{"39":{"id":39,"pid":38,"name":"\u957f\u5b89\u533a","level":3},"40":{"id":40,"pid":38,"name":"\u6865\u897f\u533a","level":3},"41":{"id":41,"pid":38,"name":"\u65b0\u534e\u533a","level":3},"42":{"id":42,"pid":38,"name":"\u4e95\u9649\u77ff\u533a","level":3},"43":{"id":43,"pid":38,"name":"\u88d5\u534e\u533a","level":3},"44":{"id":44,"pid":38,"name":"\u85c1\u57ce\u533a","level":3},"45":{"id":45,"pid":38,"name":"\u9e7f\u6cc9\u533a","level":3},"46":{"id":46,"pid":38,"name":"\u683e\u57ce\u533a","level":3},"47":{"id":47,"pid":38,"name":"\u4e95\u9649\u53bf","level":3},"48":{"id":48,"pid":38,"name":"\u6b63\u5b9a\u53bf","level":3},"49":{"id":49,"pid":38,"name":"\u884c\u5510\u53bf","level":3},"50":{"id":50,"pid":38,"name":"\u7075\u5bff\u53bf","level":3},"51":{"id":51,"pid":38,"name":"\u9ad8\u9091\u53bf","level":3},"52":{"id":52,"pid":38,"name":"\u6df1\u6cfd\u53bf","level":3},"53":{"id":53,"pid":38,"name":"\u8d5e\u7687\u53bf","level":3},"54":{"id":54,"pid":38,"name":"\u65e0\u6781\u53bf","level":3},"55":{"id":55,"pid":38,"name":"\u5e73\u5c71\u53bf","level":3},"56":{"id":56,"pid":38,"name":"\u5143\u6c0f\u53bf","level":3},"57":{"id":57,"pid":38,"name":"\u8d75\u53bf","level":3},"58":{"id":58,"pid":38,"name":"\u8f9b\u96c6\u5e02","level":3},"59":{"id":59,"pid":38,"name":"\u664b\u5dde\u5e02","level":3},"60":{"id":60,"pid":38,"name":"\u65b0\u4e50\u5e02","level":3}}},"61":{"id":61,"pid":37,"name":"\u5510\u5c71\u5e02","level":2,"region":{"62":{"id":62,"pid":61,"name":"\u8def\u5357\u533a","level":3},"63":{"id":63,"pid":61,"name":"\u8def\u5317\u533a","level":3},"64":{"id":64,"pid":61,"name":"\u53e4\u51b6\u533a","level":3},"65":{"id":65,"pid":61,"name":"\u5f00\u5e73\u533a","level":3},"66":{"id
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 方法合集
|
||
|
|
* @type {{addItem: addItem, clearItem: clearItem}}
|
||
|
|
*/
|
||
|
|
var methods = {
|
||
|
|
addItem: function ($ele, data) {
|
||
|
|
var selectedId = $ele.data('id')
|
||
|
|
, isSelected = false;
|
||
|
|
$.each(data, function (i, item) {
|
||
|
|
if (isSelected === false) {
|
||
|
|
isSelected === false && (isSelected = selectedId > 0 && selectedId === item.id);
|
||
|
|
}
|
||
|
|
var optionStr = '<option value="' + item.id + '">' + item.name + '</option>';
|
||
|
|
$ele.append(optionStr);
|
||
|
|
});
|
||
|
|
// console.log(isSelected);
|
||
|
|
isSelected && $ele.val(selectedId);
|
||
|
|
|
||
|
|
$ele.change();
|
||
|
|
},
|
||
|
|
clearItem: function ($ele) {
|
||
|
|
$ele.find('option').remove();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 注册省市区三级联动选择事件
|
||
|
|
$('[data-region-selected]').each(function () {
|
||
|
|
var $dom = $(this);
|
||
|
|
var $province = $dom.find('[data-province]')
|
||
|
|
, $city = $dom.find('[data-city]')
|
||
|
|
, $region = $dom.find('[data-region]');
|
||
|
|
// 选择省联动城市列表
|
||
|
|
$province.on("change", function () {
|
||
|
|
var provinceId = $(this).val();
|
||
|
|
if (provinceId > 0) {
|
||
|
|
methods.clearItem($city);
|
||
|
|
methods.clearItem($region);
|
||
|
|
$city.data('provinceId', provinceId);
|
||
|
|
// 遍历城市列表
|
||
|
|
methods.addItem($city, REGIONS[provinceId].city);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 选择市联动地区列表
|
||
|
|
$city.on("change", function () {
|
||
|
|
var $this = $(this)
|
||
|
|
, provinceId = $this.data('provinceId')
|
||
|
|
, cityId = $this.val();
|
||
|
|
if (cityId > 0) {
|
||
|
|
methods.clearItem($region);
|
||
|
|
$region.data('cityId', cityId);
|
||
|
|
// 遍历地区列表
|
||
|
|
methods.addItem($region, REGIONS[provinceId].city[cityId].region);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 遍历省份列表
|
||
|
|
methods.addItem($province, REGIONS);
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery);
|