数据

data.js

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>省市级联</title>
  7. </head>
  8. <body>
  9.     <div class="box">
  10.         <select name="" id="province"></select>
  11.         <select name="" id="city"></select>
  12.         <select name="" id="county"></select>
  13.     </div>
  14.     <script src="js/data.js"></script>
  15.     <script>
  16.         window.onload= function(){
  17.             init();
  18.         }
  19.         function init(){
  20.             //将省添加到province中
  21.             let province_list = data.province_list
  22.             let city_list = data.city_list
  23.             let county_list = data.county_list
  24.             let options = '<option value="" disabled selected>请选择</option>';
  25.             for(let key in province_list){
  26.                 options += '<option value="' + key + '">' +province_list[key] + '</option>';
  27.             }
  28.             let province = document.querySelector('#province');
  29.             province.innerHTML = options;
  31.             province.onchange=function(){
  32.                 //取出省前面两个数字
  33.                 let pre = this.value.substr(0,2);
  35.                 //根据省前两位特征将所有的市添加到市的组件
  36.                 options = '<option value="" disabled selected>请选择</option>';
  37.                 for (let key in city_list) {
  38.                     if(key.substr(0,2) == pre){
  39.                        options += '<option value="' + key + '">' +city_list[key] + '</option>';
  40.                     }
  41.                 }
  42.                 console.log(options)
  43.                 let city = document.querySelector("#city")
  44.                 city.innerHTML = options;
  45.             }
  48.             city.onchange=function(){
  49.                 //取出省前面4个数字
  50.                 let pre = this.value.substr(0,4);
  52.                 //根据省前两位特征将所有的市添加到市的组件
  53.                 options = '';
  54.                 for (let key in county_list) {
  55.                     if(key.substr(0,4) == pre){
  56.                        options += '<option value="' + key + '">' +county_list[key] + '</option>';
  57.                     }
  58.                 }
  59.                 console.log(options)
  60.                 let county = document.querySelector("#county")
  61.                 county.innerHTML = options;
  62.             }
  64.         }
  65.     </script>
  66. </body>
  67. </html>