省市区三级联动，获取地区编号，JSON格式
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<style>
select {
width: 200px;
padding: 5px;
}
.code-print {
box-sizing: border-box;
padding: 10px;
margin-top: 20px;
width: 200px;
border: 1px solid blue;
}
</style>
</head>
<body ng-app="areaApp">
<div ng-controller="GetAreaCodeController">
<div>
<!--ng-options中key作为select的value绑定到ng-model（就是省市区的编号),value为省市区的名字显⽰在下拉列表中-->
<select ng-model="areaObj.addressProvince" ng-change="areaObj.addressCity=undefined;areaObj.addressDistrict=undefined" ng-options="key as value for (key,value) in DISTRICTS['100000']">
<option value="">省</option>
</select>
<select ng-model="areaObj.addressCity" ng-change="areaObj.addressDistrict=undefined;" ng-options="key as value for (key,value) in DISTRICTS[areaObj.addressProvince]">
<option value="">市</option>
</select>
<select class="form-control form-control-new" ng-model="areaObj.addressDistrict" ng-options="key as value for (key,value) in DISTRICTS[areaObj.addressCity]">
<option value="">区</option>
</select>
</div>
<div class="code-print">
<p>【县级市没有区！】</p>
<p>省编号：<span ng-bind="areaObj.addressProvince"></span></p>
<p>市编号：<span ng-bind="areaObj.addressCity"></span></p>
<p>区编号：<span ng-bind="areaObj.addressDistrict"></span></p>
<p>最终编号:<span ng-bind="AreaCode(areaObj.addressProvince, areaObj.addressCity, areaObj.addressDistrict)"></span></p> </div>
</div>
<script src="cdn.static.runoob/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="areaCodes.js"></script>
</body>
</html>
View Code
areaCodes.js:
(function () {
var app = dule('areaApp', []);
function GetAreaCodeController($scope, $http) {
var DISTRICTS;
$('districts.json').then(function (res) {
/*下⾯就是获取到的数据*/
$scope.DISTRICTS = res.data;
});
$scope.areaObj = {
'addressProvince' : undefined,
'addressCity' : undefined,
'addressDistrict' : undefined,
/** 获取最终地区代码（具体到区或不设区的县级市）参数：city为该城市的地区码，district为第三级的地区代码**/ 'getAreaCode': function (province, city, district) {
var areaCode;
if(province && $scope.DISTRICTS[province]) {
if (city && !$scope.DISTRICTS[city])
areaCode = city;
else if (district)
areaCode = district;
return areaCode;
}else{
return province;
}
},
/**根据地区代码获取地址名的object**/
'getAreaName': function (areaCode) {
areaCode = parseInt(areaCode);
var provinceCode = parseInt(areaCode / 10000) * 10000;
var provinceName = $scope.DISTRICTS['100000'][provinceCode];
var cityCode = parseInt(areaCode / 100) * 100;
var districtName = '';
var cityName = '';
if($scope.DISTRICTS[provinceCode]) {
if ($scope.DISTRICTS[cityCode]) {
districtName = $scope.DISTRICTS[cityCode][areaCode];
cityName = $scope.DISTRICTS[provinceCode][cityCode];
} else
cityName = $scope.DISTRICTS[provinceCode][areaCode];
}
var areaObj = {
"areaProvince": provinceName,
"areaMunicipality": cityName,
"areaDistrict": districtName
js获取json的key和value};
return areaObj;
}
};
}
})();
View Code
districts.json：
{
"100000": {
"110000": "北京市",
"150000": "内蒙古⾃治区",
"210000": "辽宁省",
"220000": "吉林省",
"230000": "⿊龙江省",
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省",
"350000": "福建省",
"360000": "江西省",
"370000": "⼭东省",
"410000": "河南省",
"420000": "湖北省",
"430000": "湖南省",
"440000": "⼴东省",
"450000": "⼴西壮族⾃治区", "460000": "海南省",
"500000": "重庆市",
"510000": "四川省",
"520000": "贵州省",
"530000": "云南省",
"540000": "西藏⾃治区",
"610000": "陕西省",
"620000": "⽢肃省",
"630000": "青海省",
"640000": "宁夏回族⾃治区", "650000": "新疆维吾尔⾃治区", "710000": "台湾省",
"810000": "⾹港特别⾏政区", "820000": "澳门特别⾏政区" },
"110000": {
"110100": "市辖区"
},
"110100": {
"110101": "东城区",
"110102": "西城区",
"110105": "朝阳区",
"110106": "丰台区",
"110107": "⽯景⼭区",
"110108": "海淀区",
"110109": "门头沟区",
"110111": "房⼭区",
"110112": "通州区",
"110113": "顺义区",
"110114": "昌平区",
"110115": "⼤兴区",
"110116": "怀柔区",
"110117": "平⾕区",
"110118": "密云区",
"110119": "延庆区"
},
"120000": {
"120100": "市辖区"
},
"120100": {
"120101": "和平区",
"120102": "河东区",
"120103": "河西区",
"120104": "南开区",
"120105": "河北区",
"120106": "红桥区",
"120117": "宁河区",
"120118": "静海区",
"120119": "蓟州区"
},
"130000": {
"130100": "⽯家庄市",
"130200": "唐⼭市",
"130300": "秦皇岛市",
"130400": "邯郸市",
"130500": "邢台市",
"130600": "保定市",
"130700": "张家⼝市",
"130800": "承德市",
"130900": "沧州市",
"131000": "廊坊市",
"131100": "衡⽔市",
"139000": "省直辖县级⾏政区划" },
"130100": {
"130101": "市辖区",
"130102": "长安区",
"130104": "桥西区",
"130105": "新华区",
"130107": "井陉矿区",
"130108": "裕华区",
"130109": "藁城区",
"130110": "⿅泉区",
"130111": "栾城区",
"130121": "井陉县",
"130123": "正定县",
"130125": "⾏唐县",
"130126": "灵寿县",
"130127": "⾼⾢县",
"130128": "深泽县",
"130129": "赞皇县",
"130130": "⽆极县",
"130131": "平⼭县",
"130132": "元⽒县",
"130133": "赵县",
"130183": "晋州市",
"130184": "新乐市"
},
"130200": {
"130201": "市辖区",
"130202": "路南区",
"130203": "路北区",
"130204": "古冶区",
"130205": "开平区",
"130207": "丰南区",
"130208": "丰润区",
"130209": "曹妃甸区",
"130223": "滦县",
"130224": "滦南县",
"130225": "乐亭县",
"130227": "迁西县",
"130229": "⽟⽥县",
"130281": "遵化市",
"130283": "迁安市"
"130321": "青龙满族⾃治县", "130322": "昌黎县",
"130324": "卢龙县"
},
"130400": {
"130401": "市辖区",
"130402": "邯⼭区",
"130403": "丛台区",
"130404": "复兴区",
"130406": "峰峰矿区",
"130421": "邯郸县",
"130423": "临漳县",
"130424": "成安县",
"130425": "⼤名县",
"130426": "涉县",
"130427": "磁县",
"130428": "肥乡县",
"130429": "永年县",
"130430": "邱县",
"130431": "鸡泽县",
"130432": "⼴平县",
"130433": "馆陶县",
"130434": "魏县",
"130435": "曲周县",
"130481": "武安市"
},
"130500": {
"130501": "市辖区",
"130502": "桥东区",
"130503": "桥西区",
"130521": "邢台县",
"130522": "临城县",
"130523": "内丘县",
"130524": "柏乡县",
"130525": "隆尧县",
"130526": "任县",
"130527": "南和县",
"130528": "宁晋县",
"130529": "巨⿅县",
"130530": "新河县",
"130531": "⼴宗县",
"130532": "平乡县",
"130533": "威县",
"130534": "清河县",
"130535": "临西县",
"130581": "南宫市",
"130582": "沙河市"
},
"130600": {
"130601": "市辖区",
"130602": "竞秀区",
"130606": "莲池区",
"130607": "满城区",
"130608": "清苑区",
"130609": "徐⽔区",
"130623": "涞⽔县",
"130624": "⾩平县",
"130626": "定兴县",
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论