省市區編號及Angular省市區三級聯動下拉列表，獲取省市區的地區編號

来源:http://www.cnblogs.com/maderlzp/archive/2017/10/18/7687161.html
-Advertisement-
Play Games

效果圖: HTML： areaCodes.js: ...


省市區名字+編號數據結構   本文中使用angularjs實現省市區三級聯動，如需使用其他方式實現省市區三級聯動，也可以複製省市區的數據結構過去，原理一樣，實現方法大同小異

 

效果圖: (對於縣級市是沒有分區的，所以有時候區是沒有可選的）

HTML：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>省市區三級聯動</title>
 6     <style>
 7         select {
 8             width: 200px;
 9             padding: 5px;
10         }
11         .code-print{
12             box-sizing: border-box;
13             padding:10px;
14             margin-top:20px;
15             width:200px;
16             border:1px solid blue;
17         }
18     </style>
19 </head>
20 <body ng-app="areaApp">
21 <div ng-controller="GetAreaCodeController">
22     <div>
23         <!--ng-options中key作為select的value綁定到ng-model（就是省市區的編號),value為省市區的名字顯示在下拉列表中-->
24         <select ng-model="areaObj.addressProvince"
25                 ng-change="areaObj.addressCity=undefined;areaObj.addressDistrict=undefined"
26                 ng-options="key as value for (key,value) in DISTRICTS['100000']">
27             <option value="">省</option>
28         </select>
29         <select ng-model="areaObj.addressCity"
30                 ng-change="areaObj.addressDistrict=undefined;"
31                 ng-options="key as value for (key,value) in DISTRICTS[areaObj.addressProvince]">
32             <option value="">市</option>
33         </select>
34         <select class="form-control form-control-new"
35                 ng-model="areaObj.addressDistrict"
36                 ng-options="key as value for (key,value) in DISTRICTS[areaObj.addressCity]">
37             <option value="">區</option>
38         </select>
39     </div>
40     <div class="code-print">
41         <p>【縣級市沒有區！】</p>
42         <p>省編號：<span ng-bind="areaObj.addressProvince"></span></p>
43         <p>市編號：<span ng-bind="areaObj.addressCity"></span></p>
44         <p>區編號：<span ng-bind="areaObj.addressDistrict"></span></p>
45         <p>最終編號:<span ng-bind="areaObj.getAreaCode(areaObj.addressCity, areaObj.addressDistrict)"></span></p>
46     </div>
47 </div>
48 <script src="../angular.js"></script>
49 <script src="areaCodes.js"></script>
50 </body>
51 </html>

 

 

 

 

areaCodes.js:

 ↓ 點擊下麵的圖標來複制沒有行號的代碼

   1 /**
   2  * Created by mader on 2017/10/18.
   3  */
   4 (function () {
   5     var app = angular.module('areaApp', []);
   6     app.controller('GetAreaCodeController', GetAreaCodeController);
   7     function GetAreaCodeController($scope) {
   8         $scope.areaObj = {
   9             'addressProvince' : undefined,
  10             'addressCity' : undefined,
  11             'addressDistrict' : undefined,
  12             /** 獲取最終地區代碼（具體到區或不設區的縣級市） 參數：city為該城市的地區碼，district為第三級的地區代碼**/
  13             'getAreaCode': function (city, district) {
  14                 var areaCode;
  15                 if (!$scope.DISTRICTS[city] && city)
  16                     areaCode = city;
  17                 else if (district)
  18                     areaCode = district;
  19                 return areaCode;
  20             },
  21 
  22             /**根據地區代碼獲取地址名的object**/
  23             'getAreaName': function (areaCode) {
  24                 areaCode = parseInt(areaCode);
  25                 var provinceCode = parseInt(areaCode / 10000) * 10000;
  26                 var provinceName = $scope.DISTRICTS['100000'][provinceCode];
  27                 var cityCode = parseInt(areaCode / 100) * 100;
  28                 var districtName = '';
  29                 var cityName = '';
  30                 if ($scope.DISTRICTS[cityCode]) {
  31                     districtName = $scope.DISTRICTS[cityCode][areaCode];
  32                     cityName = $scope.DISTRICTS[provinceCode][cityCode];
  33                 } else
  34                     cityName = $scope.DISTRICTS[provinceCode][areaCode];
  35 
  36                 var areaObj = {
  37                     "areaProvince": provinceName,
  38                     "areaMunicipality": cityName,
  39                     "areaDistrict": districtName
  40                 };
  41                 return areaObj;
  42             }
  43         };
  44         $scope.DISTRICTS = {
  45             100000: {
  46                 330000: '浙江省',
  47                 440000: '廣東省',
  48                 310000: '上海市',
  49                 110000: '北京市',
  50                 120000: '天津市',
  51                 130000: '河北省',
  52                 140000: '山西省',
  53                 210000: '遼寧省',
  54                 220000: '吉林省',
  55                 320000: '江蘇省',
  56                 340000: '安徽省',
  57                 350000: '福建省',
  58                 360000: '江西省',
  59                 370000: '山東省',
  60                 410000: '河南省',
  61                 420000: '湖北省',
  62                 430000: '湖南省',
  63                 460000: '海南省',
  64                 500000: '重慶市',
  65                 510000: '四川省',
  66                 520000: '貴州省',
  67                 530000: '雲南省',
  68                 610000: '陝西省',
  69                 620000: '甘肅省',
  70                 630000: '青海省',
  71                 230000: '黑龍江省',
  72                 540000: '西藏自治區',
  73                 150000: '內蒙古自治區',
  74                 450000: '廣西壯族自治區',
  75                 640000: '寧夏回族自治區',
  76                 650000: '新疆維吾爾自治區',
  77                 710000: '臺灣省',
  78                 810000: '香港特別行政區',
  79                 820000: '澳門特別行政區'
  80             },
  81             110000: {
  82                 110100: '北京市市轄區'
  83             },
  84             110100: {
  85                 110101: '東城區',
  86                 110102: '西城區',
  87                 110105: '朝陽區',
  88                 110106: '丰台區',
  89                 110107: '石景山區',
  90                 110108: '海澱區',
  91                 110109: '門頭溝區',
  92                 110111: '房山區',
  93                 110112: '通州區',
  94                 110113: '順義區',
  95                 110114: '昌平區',
  96                 110115: '大興區',
  97                 110116: '懷柔區',
  98                 110117: '平谷區',
  99                 110118: '密雲區',
 100                 110119: '延慶區'
 101             },
 102             120000: {
 103                 120100: '天津市市轄區'
 104             },
 105             120100: {
 106                 120101: '和平區',
 107                 120102: '河東區',
 108                 120103: '河西區',
 109                 120104: '南開區',
 110                 120105: '河北區',
 111                 120106: '紅橋區',
 112                 120110: '東麗區',
 113                 120111: '西青區',
 114                 120112: '津南區',
 115                 120113: '北辰區',
 116                 120114: '武清區',
 117                 120115: '寶坻區',
 118                 120116: '濱海新區',
 119                 120117: '寧河區',
 120                 120118: '靜海區',
 121                 120119: '薊州區'
 122             },
 123             130000: {
 124                 130100: '石家莊市',
 125                 130200: '唐山市',
 126                 130300: '秦皇島市',
 127                 130400: '邯鄲市',
 128                 130500: '邢台市',
 129                 130600: '保定市',
 130                 130700: '張家口市',
 131                 130800: '承德市',
 132                 130900: '滄州市',
 133                 131000: '廊坊市',
 134                 131100: '衡水市',
 135                 139000: '省直轄縣級行政區劃'
 136                 // 139001: '定州市', 139002: '辛集市'
 137             },
 138             139000: {
 139                 139001: '定州市',
 140                 139002: '辛集市'
 141             },
 142             130100: {
 143                 130102: '長安區',
 144                 130104: '橋西區',
 145                 130105: '新華區',
 146                 130107: '井陘礦區',
 147                 130108: '裕華區',
 148                 130109: '藁城區',
 149                 130110: '鹿泉區',
 150                 130111: '欒城區',
 151                 130121: '井陘縣',
 152                 130123: '正定縣',
 153                 130125: '行唐縣',
 154                 130126: '靈壽縣',
 155                 130127: '高邑縣',
 156                 130128: '深澤縣',
 157                 130129: '贊皇縣',
 158                 130130: '無極縣',
 159                 130131: '平山縣',
 160                 130132: '元氏縣',
 161                 130133: '趙縣',
 162                 //            130181: '辛集市',
 163                 130183: '晉州市',
 164                 130184: '新樂市'
 165             },
 166             130200: {
 167                 130202: '路南區',
 168                 130203: '路北區',
 169                 130204: '古冶區',
 170                 130205: '開平區',
 171                 130207: '丰南區',
 172                 130208: '豐潤區',
 173                 130209: '曹妃甸區',
 174                 130223: '灤縣',
 175                 130224: '灤南縣',
 176                 130225: '樂亭縣',
 177                 130227: '遷西縣',
 178                 130229: '玉田縣',
 179                 130281: '遵化市',
 180                 130283: '遷安市'
 181             },
 182             130300: {
 183                 130302: '海港區',
 184                 130303: '山海關區',
 185                 130304: '北戴河區',
 186                 130306: '撫寧區',
 187                 130321: '青龍滿族自治縣',
 188                 130322: '昌黎縣',
 189                 130324: '盧龍縣'
 190             },
 191             130400: {
 192                 130402: '邯山區',
 193                 130403: '叢台區',
 194                 130404: '復興區',
 195                 130406: '峰峰礦區',
 196                 130421: '邯鄲縣',
 197                 130423: '臨漳縣',
 198                 130424: '成安縣',
 199                 130425: '大名縣',
 200                 130426: '涉縣',
 201                 130427: '磁縣',
 202                 //            130428: '肥鄉區',
 203                 130428: '肥鄉縣',
 204                 130429: '永年縣',
 205                 //            130429: '永年區',
 206                 130430: '邱縣',
 207                 130431: '雞澤縣',
 208                 130432: '廣平縣',
 209                 130433: '館陶縣',
 210                 130434: '魏縣',
 211                 130435: '曲周縣',
 212                 130481: '武安市'
 213             },
 214             130500: {
 215                 130502: '橋東區',
 216                 130503: '橋西區',
 217                 130521: '邢台縣',
 218                 130522: '臨城縣',
 219                 130523: '內丘縣',
 220                 130524: '柏鄉縣',
 221                 130525: '隆堯縣',
 222                 130526: '任縣',
 223                 130527: '南和縣',
 224                 130528: '寧晉縣',
 225                 130529: '巨鹿縣',
 226                 130530: '新河縣',
 227                 130531: '廣宗縣',
 228                 130532: '平鄉縣',
 229                 130533: '威縣',
 230                 130534: '清河縣',
 231                 130535: '臨西縣',
 232                 130581: '南宮市',
 233                 130582: '沙河市'
 234             },
 235             130600: {
 236                 130602: '競秀區',
 237                 130606: '蓮池區',
 238                 130607: '滿城區',
 239                 130608: '清苑區',
 240                 130609: '徐水區',
 241                 130623: '淶水縣',
 242                 130624: '阜平縣',
 243                 130626: '定興縣',
 244                 130627: '唐縣',
 245                 130628: '高陽縣',
 246                 130629: '容城縣',
 247                 130630: '淶源縣',
 248                 130631: '望都縣',
 249                 130632: '安新縣',
 250                 130633: '易縣',
 251                 130634: '曲陽縣',
 252                 130635: '蠡縣',
 253                 130636: '順平縣',
 254                 130637: '博野縣',
 255                 130638: '雄縣',
 256                 130681: '涿州市',
 257                 //            130682: '定州市',
 258                 130683: '安國市',
 259                 130684: '高碑店市'
 260             },
 261             130700: {
 262                 130702: '橋東區',
 263                 130703: '橋西區',
 264                 130705: '宣化區',
 265                 130706: '下花園區',
 266                 130708: '萬全區',
 267                 130709: '崇禮區',
 268                 130722: '張北縣',
 269                 130723: '康保縣',
 270                 130724: '沽源縣',
 271                 130725: '尚義縣',
 272                 130726: '蔚縣',
 273                 130727: '陽原縣',
 274                 130728: '懷安縣',
 275                 130730: '懷來縣',
 276                 130731: '涿鹿縣',
 277                 130732: '赤城縣'
 278             },
 279             130800: {
 280                 130802: '雙橋區',
 281                 130803: '雙灤區',
 282                 130804: '鷹手營子礦區',
 283                 130821: '承德縣',
 284                 130822: '興隆縣',
 285                 130823: '平泉縣',
 286                 130824: '灤平縣',
 287                 130825: '隆化縣',
 288                 130826: '豐寧滿族自治縣',
 289                 130827: '寬城滿族自治縣',
 290                 130828: '圍場滿族蒙古族自治縣'
 291             },
 292             130900: {
 293                 130902: '新華區',
 294                 130903: '運河區',
 295                 130921: '滄縣',
 296                 130922: '青縣',
 297                 130923: '東光縣',
 298                 130924: '海興縣',
 299                 130925: '鹽山縣',
 300                 130926: '肅寧縣',
 301                 130927: '南皮縣',
 302                 130928: '吳橋縣',
 303                 130929: '獻縣',
 304                 130930: '孟村回族自治縣',
 305                 130981: '泊頭市',
 306                 130982: '任丘市',
 307                 130983: '黃驊市',
 308                 130984: '河間市'
 309             },
 310             131000: {
 311                 131002: '安次區',
 312                 131003: '廣陽區',
 313                 131022: '固安縣',
 314                 131023: '永清縣',
 315                 131024: '香河縣',
 316                 131025: '大城縣',
 317                 131026: '文安縣',
 318                 131028: '大廠回族自治縣',
 319                 131081: '霸州市',
 320                 131082: '三河市'
 321             },
 322             131100: {
 323                 131102: '桃城區',
 324                 131103: '冀州區',
 325                 131121: '棗強縣',
 326                 131122: '武邑縣',
 327                 131123: '武強縣',
 328                 131124: '饒陽縣',
 329                 131125: '安平縣',
 330                 131126: '故城縣',
 331                 131127: '景縣',
 332                 131128: '阜城縣',
 333                 131182: '深州市'
 334             },
 335             140000: {
 336                 140100: '太原市',
 337                 140200: '大同市',
 338                 140300: '陽泉市',
 339                 140400: '長治市',
 340                 140500: '晉城市',
 341                 140600: '朔州市',
 342                 140700: '晉中市',
 343                 140800: '運城市',
 344                 140900: '忻州市',
 345                 141000: '臨汾市',
 346                 141100: '呂梁市'
 347             },
 348             140100: {
 349                 140105: '小店區',
 350                 140106: '迎澤區',
 351                 140107: '杏花嶺區',
 352                 140108: '尖草坪區',
 353                 140109: '萬柏林區',
 354                 140110: '晉源區',
 355                 140121: '清徐縣',
 356                 140122: '陽曲縣',
 357                 140123: '婁煩縣',
 358                 140181: '古交市'
 359             },
 360             140200: {
 361                 140202: '城區',
 362                 140203: '礦區',
 363                 140211: '南郊區',
 364                 140212: '新榮區',
 365                 140221: '陽高縣',
 366                 140222: '天鎮縣',
 367                 140223: '廣靈縣',
 368                 140224: '靈丘縣',
 369                 140225: '渾源縣',
 370                 140226: '左雲縣',
 371                 140227: '大同縣'
 372             },
 373             140300: {
 374                 140302: '城區',
 375                 140303: '礦區',
 376                 140311: '郊區',
 377                 140321: '平定縣',
 378                 140322: '盂縣'
 379             },
 380             140400: {
 381                 140402: '城區',
 382                 140411: '郊區',
 383                 140421: '長治縣',
 384                 140423: '襄垣縣',
 385                 140424: '屯留縣',
 386                 140425: '平順縣',
 387                 140426: '黎城縣',
 388                 140427: '壺關縣',
 389                 140428: '長子縣',
 390                 140429: '武鄉縣',
 391                 140430: '沁縣',
 392                 140431: '沁源縣',
 393                 140481: '潞城市'
 394             },
 395             140500: {
 396                 140502: '城區',
 397                 140521: '沁水縣',
 398                 140522: '陽城縣',
 399                 140524: '陵川縣',
 400                 140525: '澤州縣',
 401                 140581: '高平市'
 402             },
 403             140600: {
 404                 140602: '朔城區',
 405                 140603: '平魯區',
 406                 140621: '山陰縣',
 407                 140622: '應縣',
 408                 140623: '右玉縣',
 409                 140624: '懷仁縣'
 410             },
 411             140700: {
 412                 140702: '榆次區',
 413                 140721: '榆社縣',
 414                 140722: '左權縣',
 415                 140723: '和順縣',
 416                 140724: '昔陽縣',
 417                 140725: '壽陽縣',
 418                 140726: '太谷縣',
 419                 140727: '祁縣',
 420                 140728: '平遙縣',
 421                 140729: '靈石縣',
 422                 140781: '介休市'
 423             },
 424             140800: {
 425                 140802: '鹽湖區',
 426                 140821: '臨猗縣',
 427                 140822: '萬榮縣',
 428                 140823: '聞喜縣',
 429                 140824: '稷山縣',
 430                 140825: '新絳縣',
 431                 140826: '絳縣',
 432                 140827: '垣曲縣',
 433                 140828: '夏縣',
 434                 140829: '平陸縣',
 435                 140830: '芮城縣',
 436                 140881: '永濟市',
 437                 140882: '河津市'
 438             },
 439             140900: {
 440                 140902: '忻府區',
 441                 140921: '定襄縣',
 442                 140922: '五台縣',
 443                 140923: '代縣',
 444                 140924: '繁峙縣',
 445                 140925: '寧武縣',
 446                 140926: '靜樂縣',
 447                 140927: '神池縣',
 448                 140928: '五寨縣',
 449                 140929: '岢嵐縣',
 450                 140930: '河曲縣',
 451                 140931: '保德縣',
 452                 140932: '偏關縣',
 453                 140981: '原平市'
 454
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [js高手之路]html5 canvas教程 - 1px問題以及繪製坐標系網格
    在canvas中，要畫出1px的線條，預設情況下是不行的 上述代碼中，context是canvas的上下文，在這段代碼中，我畫了2條線，上面那條線並不是1px，下麵的那條線才是1px 上面你可能還看不清楚，那條黑線到底是不是1px，你可以把他們放到畫圖軟體或者photoshop中，放大，然後打開坐標 ...
  • CSS設置背景透明字體不透明
    寫CSS時給容器設置透明度的時候如果使用background-color: #000000; opacity: 0.5;這時會出現容器里的文字也跟著透明。解決辦法是不用十六進位的色值和透明度分開寫，使用background-color: rgba(000, 000, 000, 0.5);這樣容器內的 ...
  • js 兩個日期比較相差多少天
    var day1 = new Date("2017-9-17"); var day2 = new Date("2017-10-18"); console.log((day2 - day1) / (1000 * 60 * 60 * 24)); ...
  • vue 集成 axios 發送post請求 payload導致後臺無法接收到數據問題
    vue 集成axios之後，發送的post請求預設為payload 方式。 如果想改為正常的方式，需要增加headers頭，並且將發送是數據json格式改為 querystring的方式。 安裝依賴 導入依賴 在需要使用post的地方使用下麵的方法，其中postData是一個json對象 這樣，發送 ...
  • 導航欄鏈接點擊後跳轉，新頁面相應的鏈接添加顏色
    html： <div class="nav"> <ul> <li class="active"><a href="a.html">aaa</a></li> <li><a href="b.html">bbb</a></li> <li><a href="c.html">ccc</a></li> </ul ...
  • d3力導向圖聚焦
    雙擊節點，節點以及節點一度關聯的節點保持高亮狀態，其餘節點變灰，半徑變小，文字消失，並且向內收縮。 ...
  • js 比較兩個日期的大小
    function tab(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.getTime() > oDate2.getTime()){ console.log('第一個大'); }... ...
  • Iframe父子視窗之間的跨域事件調用和傳值
    實現方案1：location.hash傳值 父頁面：parent.html（所在域：www.parent.com） 子頁面：child.html（所在域：www.child.com） 要實現父子頁面雙向的事件調用和傳值，需要多加一個代理頁面，主要用於子頁面調用父頁面的方法 代理頁面：proxy.ht ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類