原生JS实现省市区(县)三级联动下拉列表

接到了公司的新需求，其中有涉及到要选择区域的三级联动下拉列表有关的东西。然后我到网上找有关这方面的资料，发现大多是用插件写的，但是我不想让代码变得很庞大，所以想用原生的JS来实现。实现的思路与主要代码如下：
主要的html代码：

  <fieldset>
    <legend>下拉选择框实现省市区（县）三级联动</legend>
    <form action="#">
      <label for="addr-show">您选择的是：
        <input type="text" value="" id="addr-show">
      </label>
      <br>

      <!-- 省份选择 -->
      <select id="prov" onchange="showCity(this)">
        <option>=请选择省份=</option>
      </select>

      <!--城市选择-->
      <select id="city" onchange="showCountry(this)">
        <option>=请选择城市=</option>
      </select>

      <!--县区选择-->
      <select id="country" onchange="selecCountry(this)">
        <option>=请选择县区=</option>
      </select>

      <button type="button" class="btn met1" onClick="showAddr()">确定</button>
    </form>
  </fieldset>

CSS代码如下：

* {
  margin: 0;
  padding: 0;
}

fieldset {
  width: 500px;
  padding: 20px;
  margin: 30px;
  border: 1px solid #ccc;
}

legend{
  font-size: 18px;
  font-weight: bold;
}

#addr-show {
  width: 200px;
  height: 25px;
  margin-bottom: 10px;
}

.btn {
  width: 80px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
  background-color: #aaa;
  margin: 0 20px;
}

.btn:disabled{
  background-color:#ccc;
}

select {
  width: 120px;
  height: 30px;
}

select#city {
  display: none;
}

select#country {
  display: none;
}

页面加载时，动态获取省份列表并放到下拉菜单的下拉项中：

/*自动加载省份列表*/
(function showProv() {
  btn.disabled = true;
  var len = provice.length;
  for (var i = 0; i < len; i++) {
    var provOpt = document.createElement('option');
    provOpt.innerText = provice[i]['name'];
    provOpt.value = i;
    prov.appendChild(provOpt);
  }
})();

这是一个立即执行函数。
当点击省份的下拉列表时会触发select的onchange事件，我们用options的selectedIndex属性找到用户选择的省份，动态的生成相应省得城市列表。

/*根据所选的省份来显示城市列表*/
function showCity(obj) {
  var val = obj.options[obj.selectedIndex].value;
  if (val >=0) {
    city.style.display = 'inline-block';
    country.style.display = 'none';
  } else {
    city.style.display = 'none';
    country.style.display = 'none';
  }
  if (val != current.prov) {
    current.prov = val;
    addrShow.value = '';
    btn.disabled = true;
  }
  if (val != null) {
    city.length = 1;
    if (provice[val]) {
      var cityLen = provice[val]["city"].length;
    }
    // var cityLen = provice[val]["city"].length;
    for (var j = 0; j < cityLen; j++) {
      var cityOpt = document.createElement('option');
      cityOpt.innerText = provice[val]["city"][j].name;
      cityOpt.value = j;
      city.appendChild(cityOpt);
    }
  }
}

当点击城市列表中的某一项时，原理同上（此处不赘述）

/*根据所选的城市来显示县区列表*/
function showCountry(obj) {
  var val = obj.options[obj.selectedIndex].value;
  if (val >=0) {
    country.style.display = 'inline-block';
  } else {
    country.style.display = 'none';
  }
  current.city = val;
  if (val != null) {
    country.length = 1; //清空之前的内容只留第一个默认选项
    if (provice[current.prov]["city"][val]) {
      var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
    }
    // var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
    if(countryLen == 0){
      addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
      return;
    }
    for (var n = 0; n < countryLen; n++) {
      var countryOpt = document.createElement('option');
      countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];
      countryOpt.value = n;
      country.appendChild(countryOpt);
    }
  }
}

我们这里用的省市区数据来自网络，不保证完整性，仅作案例使用。数据格式如下：

var provice = [
  {
    name: "北京市",
    city: [
      {
        name: "北京市",
        districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
      }
    ]
  },
  ...
  {
    name: "澳门",
    city: [
      {
        name: "澳门特别行政区",
        districtAndCounty: ["澳门特别行政区"]
      }
    ]
  }

完整版在这里全部省市区(县)数据