Of Stack

javascript based on DOM to realize the provincial and municipal link drop down box method

  • 2020-06-12 08:32:31
  • OfStack

An example of javascript based on DOM is presented in this paper. Share to everybody for everybody reference. Specific implementation methods are as follows: 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Provincial and municipal link drop-down frame </title>
<script type="text/javascript">
var provs = { " Jiangxi province ": [" nanchang ", " jingdezhen ", "9 jiang ", " yingtan ", " pingxiang ", " xinyu ", " ganzhou ", " gian ", " yichun ", " fuzhou ", " shangrao "],
  " Fujian province ": [" fuzhou ", " xiamen ", " putian ", "3 Ming ", " quanzhou ", " zhangzhou ", " nanping ", " longyan ", " ningde "],
  " In hebei province ": [" shijiazhuang ", " handan ", " xingtai ", " baoding ", " zhangjiakou ", " chengde ", " langfang ", " tangshan ", " qinhuangdao ", " cangzhou ", " hengshui "]
};
function loadProv() {
  // Loading province data 
  var prov = document.getElementById("prov");
  for (var key in provs) {
    var provName = key;
    var optProv = document.createElement("option");
    optProv.value = provName;
    optProv.innerText = provName;
    prov.appendChild(optProv);
  }
}
function provChange() {
  var prov = document.getElementById("prov");
  var city = document.getElementById("city");
  var provName = prov.value;
  // If no province is selected, hide the city drop - down box 
  if (provName == "none") {
    city.style.display = "none";
    return;
  }
  else {
    city.style.display = "";
  }
  var citys = provs[provName];
  //city.options.length = 0;
  // This also clears the original list 
  // Empty the city of raw data 
  for (var i = city.childNodes.length - 1; i >= 0; i--) {
    var child = city.childNodes[i];
    city.removeChild(child);
  }
  // Add new city data 
  for (var i = 0; i < citys.length; i++) {
    var optCity = document.createElement("option");
    optCity.value = citys[i];
    optCity.innerText = citys[i];
    city.appendChild(optCity);
  }
}
</script>
</head>
<body onload="loadProv()">
<select id="prov" onchange="provChange()">
<option value="none"> Please select a province </option>
</select>
<select id="city" style="display:none"></select>
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.

Related articles: