Example of JavaScript provincial and municipal link drop down menu

  • 2021-07-21 06:00:57
  • OfStack

Recently, I learned a simple example about provincial and municipal associations, and posted it to share it with you:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
</head>
<body>
 <select id="selProvince" onchange="changeCity()">
  <option> Please select a province </option>
 </select>
 <select id="selCity">
  <option> Please select a city </option>
 </select>
 <script>
  function $(ID){
  return document.getElementById(ID);
  }
  var cityList=new Array();
  cityList[' Beijing ']=[' Dongcheng District ',' Xicheng District ',' Changping District '];
  cityList[' Hebei Province ']=[' Baoding ',' Shijiazhuang ',' Dingzhou '];
   cityList[' Jiangsu Province '] = [' Nanjing City ',' Suzhou City ',' Wuxi City '];
   cityList[' Zhejiang Province '] = [' Hangzhou ',' Ningbo City ',' Wenzhou City '];
   cityList['4 Sichuan Province '] = ['4 Sichuan Province ',' Chengdu '];
   cityList[' Hainan Province '] = [' Haikou City '];
  function changeCity(){
   var province=$("selProvince").value;
   var city=$("selCity");
    city.options.length=0;
   for (var i in cityList) {
   if(i==province){
    for (var j in cityList[i]) {
     city.add(new Option(cityList[i][j],cityList[i][j]),null);
    }
   }
   }
  }
  function allCity(){
   var province=$("selProvince");
   for (var i in cityList) {
    province.add(new Option(i,i),null);
   }
  }

  window.onload=allCity;
 </script>
</body>
</html>

Related articles: