image.png

    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>省市区级联选择菜单</title>
    8. </head>
    10. <body>
    12.     <div class="box">
    13.         <select name="" id="province">
    15.         </select>
    16.         <select name="" id="city">
    18.         </select>
    19.         <select name="" id="area">
    21.         </select>
    22.     </div>
    24.     <script src="js/data.js" type="text/javascript" charset="utf-8"></script>
    25.     <script>
    26.         window.onload = function () {
    27.             init();
    28.         }
    30.         function init() {
    31.             // 将省份添加到province
    32.             /* let province_list = data.province_list;
    33.             let city_list = data.province_list;
    34.             let area_list = data.province_list; */
    36.             // es6的结构赋值
    37.             let {
    38.                 province_list,
    39.                 city_list,
    40.                 county_list
    41.             } = data;
    44.             let options ='<option value="" disabled selected>请选择</options>';
    45.             for (let key in province_list) {
    46.                 options += '<option value="' + key + '">' + province_list[key] + '</options>';
    47.             }
    49.             let province = document.querySelector('#province');
    50.             province.innerHTML = options;
    52.             province.onchange = function () {
    53.                 // 获取省份的前两位数字
    54.                 let pre = this.value.substr(0, 2);
    56.                 // 根据省份前两位数将所有的市添加到city
    57.                 let options ='<option value="" disabled selected>请选择</options>';
    58.                 for (let key in city_list) {
    59.                     if (key.substr(0, 2) == pre) {
    60.                         options += '<option value="' + key + '">' + city_list[key] + '</options>';
    61.                     }
    62.                 }
    63.                 let city = document.querySelector('#city');
    64.                 city.innerHTML = options;
    65.             }
    67.             city.onchange = function () {
    68.                 // 获取省份的前两位数字
    69.                 let pre = this.value.substr(0, 4);
    71.                 // 根据省份前两位数将所有的市添加到city
    72.                 let options ='';
    73.                 for (let key in county_list) {
    74.                     if (key.substr(0, 4) == pre) {
    75.                         options += '<option value="' + key + '">' + county_list[key] + '</options>';
    76.                     }
    77.                 }
    79.                 let area = document.querySelector('#area');
    80.                 area.innerHTML = options;
    81.             }
    82.         }
    83.     </script>
    84. </body>
    86. </html>