javascript

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

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.