1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    10. <body>
    11.     <!-- 下拉选择框 -->
    12.     <select name="province" id="province">
    13.     </select>
    14.     <select name="city" id="city">
    15.         <!-- <option value=""></option> -->
    16.     </select>
    17.     <select name="area" id="area"></select>
    20.     <script>
    21.         var data = {
    22.             '86': {
    23.                 "110000": "北京市",
    24.                 "120000": "天津市",
    25.                 "130000": "河北省",
    26.                 "140000": "山西省",
    27.                 "150000": "内蒙古自治区",
    28.                 "210000": "辽宁省",
    29.                 "220000": "吉林省",
    30.                 "230000": "黑龙江省",
    31.                 "310000": "上海市",
    32.                 "320000": "江苏省",
    33.                 "330000": "浙江省",
    34.                 "340000": "安徽省",
    35.                 "350000": "福建省",
    36.                 "360000": "江西省",
    37.                 "370000": "山东省",
    38.                 "410000": "河南省",
    39.                 "420000": "湖北省",
    40.                 "430000": "湖南省",
    41.                 "440000": "广东省",
    42.                 "450000": "广西壮族自治区",
    43.                 "460000": "海南省",
    44.                 "500000": "重庆市",
    45.                 "510000": "四川省",
    46.                 "520000": "贵州省",
    47.                 "530000": "云南省",
    48.                 "540000": "西藏自治区",
    49.                 "610000": "陕西省",
    50.                 "620000": "甘肃省",
    51.                 "630000": "青海省",
    52.                 "640000": "宁夏回族自治区",
    53.                 "650000": "新疆维吾尔自治区",
    54.                 "710000": "台湾省",
    55.                 "810000": "香港特别行政区",
    56.                 "820000": "澳门特别行政区"
    57.             },
    58.             "110000": {
    59.                 "110100": "市辖区"
    60.             },
    61.             "110100": {
    62.                 "110101": "东城区",
    63.                 "110102": "西城区",
    64.                 "110105": "朝阳区",
    65.                 "110106": "丰台区",
    66.                 "110107": "石景山区",
    67.                 "110108": "海淀区",
    68.                 "110109": "门头沟区",
    69.                 "110111": "房山区",
    70.                 "110112": "通州区",
    71.                 "110113": "顺义区",
    72.                 "110114": "昌平区",
    73.                 "110115": "大兴区",
    74.                 "110116": "怀柔区",
    75.                 "110117": "平谷区",
    76.                 "110118": "密云区",
    77.                 "110119": "延庆区"
    78.             },
    79.             "120000": {
    80.                 "120100": "市辖区"
    81.             },
    82.             "120100": {
    83.                 "120101": "和平区",
    84.                 "120102": "河东区",
    85.                 "120103": "河西区",
    86.                 "120104": "南开区",
    87.                 "120105": "河北区",
    88.                 "120106": "红桥区",
    89.                 "120110": "东丽区",
    90.                 "120111": "西青区",
    91.                 "120112": "津南区",
    92.                 "120113": "北辰区",
    93.                 "120114": "武清区",
    94.                 "120115": "宝坻区",
    95.                 "120116": "滨海新区",
    96.                 "120117": "宁河区",
    97.                 "120118": "静海区",
    98.                 "120119": "蓟州区"
    99.             },
    100.             "130000": {
    101.                 "130100": "石家庄市",
    102.                 "130200": "唐山市",
    103.                 "130300": "秦皇岛市",
    104.                 "130400": "邯郸市",
    105.                 "130500": "邢台市",
    106.                 "130600": "保定市",
    107.                 "130700": "张家口市",
    108.                 "130800": "承德市",
    109.                 "130900": "沧州市",
    110.                 "131000": "廊坊市",
    111.                 "131100": "衡水市"
    112.             },
    113.             "130100": {
    114.                 "130101": "市辖区",
    115.                 "130102": "长安区",
    116.                 "130104": "桥西区",
    117.                 "130105": "新华区",
    118.                 "130107": "井陉矿区",
    119.                 "130108": "裕华区",
    120.                 "130109": "藁城区",
    121.                 "130110": "鹿泉区",
    122.                 "130111": "栾城区",
    123.                 "130121": "井陉县",
    124.                 "130123": "正定县",
    125.                 "130125": "行唐县",
    126.                 "130126": "灵寿县",
    127.                 "130127": "高邑县",
    128.                 "130128": "深泽县",
    129.                 "130129": "赞皇县",
    130.                 "130130": "无极县",
    131.                 "130131": "平山县",
    132.                 "130132": "元氏县",
    133.                 "130133": "赵县",
    134.                 "130171": "石家庄高新技术产业开发区",
    135.                 "130172": "石家庄循环化工园区",
    136.                 "130181": "辛集市",
    137.                 "130183": "晋州市",
    138.                 "130184": "新乐市"
    139.             },
    140.             "130200": {
    141.                 "130201": "市辖区",
    142.                 "130202": "路南区",
    143.                 "130203": "路北区",
    144.                 "130204": "古冶区",
    145.                 "130205": "开平区",
    146.                 "130207": "丰南区",
    147.                 "130208": "丰润区",
    148.                 "130209": "曹妃甸区",
    149.                 "130224": "滦南县",
    150.                 "130225": "乐亭县",
    151.                 "130227": "迁西县",
    152.                 "130229": "玉田县",
    153.                 "130271": "河北唐山芦台经济开发区",
    154.                 "130272": "唐山市汉沽管理区",
    155.                 "130273": "唐山高新技术产业开发区",
    156.                 "130274": "河北唐山海港经济开发区",
    157.                 "130281": "遵化市",
    158.                 "130283": "迁安市",
    159.                 "130284": "滦州市"
    160.             },
    161.         };
    163.         function init(elementId, data) {
    164.             let inner = '';
    165.             for (let city in data) {
    166.                 inner += '<option value="' + city + '">' + data[city] + '</option>';
    167.             }
    168.             document.getElementById(elementId).innerHTML = inner;
    169.         }
    171.         //初始化数据
    172.         init('province', data['86']);
    173.         init('city',data['110000']);
    174.         init('area',data['110100'])
    176.         let province = document.getElementById('province');
    177.         province.addEventListener('change', function () {
    178.             // alert(this.value);
    179.             init('city', data[this.value]); //发生change事件，完成后有各个城市的选择
    180.             init('area',data[document.getElementById('city').value]); //改变县的区域，修改初始
    181.         })
    183.         let city = document.getElementById('city');
    184.         city.addEventListener('change', function () {
    185.             // alert(this.value);
    186.             init('area', data[this.value]);
    187.         })
    188.     </script>
    189. </body>
    190. </html>