Native JS implements three-level linkage drop-down list of provinces, municipalities (counties)

Received a new request from the company, which is related to the three-level linkage drop-down list of the area to be selected. Then I went to the Internet to find information about this, and found that most of them are written with plugins, but I don't want to make the code very large, so I want to use native JS to implement it. The idea and main code of the realization are as follows:
The main html code:

  <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>

The CSS code is as follows:

* {
  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;
}

When the page loads, dynamically obtain the list of provinces and put them into the drop-down items of the drop-down menu:

/*自动加载省份列表*/
(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);
  }
})();

This is an immediate execution function.
When the drop-down list of provinces is clicked, the onchange event of select will be triggered. We use the selectedIndex property of options to find the province selected by the user, and dynamically generate the corresponding province list.

/*根据所选的省份来显示城市列表*/
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);
    }
  }
}

When clicking on an item in the city list, the principle is the same as above (not repeated here)

/*根据所选的城市来显示县区列表*/
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);
    }
  }
}

The provincial and urban data we use here comes from the Internet, and the integrity is not guaranteed. It is only used for case studies. The data format is as follows:

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

The full version is here for all provinces and cities (counties) data