recherche

Maison >interface Web >js tutoriel >Méthode JavaScript pour implémenter des listes déroulantes en cascade de province et de ville basées sur DOM

Méthode JavaScript pour implémenter des listes déroulantes en cascade de province et de ville basées sur DOM

PHPz
PHPzoriginal
2016-05-16 15:59:071297parcourir

Cet article présente principalement la méthode d'utilisation de JavaScript pour implémenter des listes déroulantes en cascade de province et de ville basées sur DOM. Il peut réaliser la fonction de sélection de la liste déroulante de ville correspondante après avoir sélectionné une province. Les amis qui en ont besoin peuvent s'y référer

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联下拉框</title>
<script type="text/javascript">
var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"],
  "福建省": ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
  "河北省": ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"]
};
function loadProv() {
  //加载省份数据
  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 (provName == "none") {
    city.style.display = "none";
    return;
  }
  else {
    city.style.display = "";
  }
  var citys = provs[provName];
  //city.options.length = 0;
  //用这种方法也可以清空原始列表
  //清空城市的原始数据
  for (var i = city.childNodes.length - 1; i >= 0; i--) {
    var child = city.childNodes[i];
    city.removeChild(child);
  }
  //添加新的城市数据
  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">请选择省</option>
</select>
<select id="city" style="display:none"></select>
</body>
</html>

【Tutoriels associés recommandés】

1 Tutoriel vidéo JavaScript
2. Manuel JavaScript en ligne
3 Tutoriel bootstrap

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript implémente les compétences d'effets spéciaux de fluctuation de l'éblouissement Flash_javascriptArticle suivant：JavaScript implémente les compétences d'effets spéciaux de fluctuation de l'éblouissement Flash_javascript

Articles Liés

Voir plus