suchen

Heim >Web-Frontend >js-Tutorial >js realisiert den dreistufigen Verknüpfungsmenüeffekt von Provinzen und Gemeinden

js realisiert den dreistufigen Verknüpfungsmenüeffekt von Provinzen und Gemeinden

高洛峰
高洛峰Original
2017-03-23 14:11:122298Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode von js geteilt, um den dreistufigen Verknüpfungsmenüeffekt von Provinzen und Gemeinden zu realisieren. Es hat einen sehr guten Referenzwert. Schauen wir uns den folgenden Editor an:

js 实现省市区三级联动菜单效果Code wie folgt:


Für weitere js-Implementierungen von provinziellen und kommunalen dreistufigen Verknüpfungsmenüeffekten achten Sie bitte auf PHP-Chinesisch Website für verwandte Artikel! 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>省市区三级联动</title>
</head>
<body>
 <form>
 <select id="province">
  <option>请选择省份</option>
 </select>
 <select id="city">
  <option>请选择城市</option>
 </select>
 <select id="district">
  <option>请选择区域</option>
 </select> 
 </form>
 <script src="json.js"></script>
 <script type="text/javascript">
 var proData = [],
  cityData = [],
  distData = [];
 var proSelect = document.getElementById("province"),
   citySelect = document.getElementById("city"),
   districtSelect = document.getElementById("district");
 var curPro = "",
  curCity = "";
 // 封装更新选择列表函数
 function fillselect(select,list){
  for (var i = select.length-1; i > 0 ; i--){
   select.remove(i);
  }
  list.forEach(function(data){
  var option = new Option(data.name, data.sheng);
  option.dataset.di = data.di;
  select.add(option);
  })
 }
 // 将数据按省、市、地区分别存储
 dataJson.forEach(function(data){
  if (data.level === 1){
  proData.push(data);
  }
  if (data.level === 2){
  cityData.push(data);
  }
  if (data.level === 3){
  distData.push(data);
  }
 })
 fillselect(proSelect,proData);
 // 监听一级省份选择列表change事件，更新二级城市列表
 proSelect.addEventListener("change",function(event){
  var val = event.target.value;
  var list = [];
  cityData.forEach(function(d){
  if (d.sheng === val) {
   list.push(d);
  }
  })
  fillselect(citySelect,list);
 })
 // 监听二级城市选择列表change事件，更新三级区域列表
 citySelect.addEventListener("change",function(event){
  var val = event.target.value;
  var curIndex = event.target.selectedIndex;
  curCity = event.target[curIndex].dataset.di;
  console.log(event.target,curCity);
  var list = [];
  distData.forEach(function(d){
  if (d.di === curCity && d.sheng === val) {
   list.push(d);
  }
  })
  fillselect(districtSelect,list);
 })
 </script>
</body>
</html>
Verwandte Artikel:

Verwendung von PHP zur Implementierung einer dreistufigen Verknüpfung in städtischen Gebieten mit angeschlossener Datenbank

Beispielcode für die Implementierung von Ajax Three Dropdown-Menü „Verknüpfung auf Ebenen“

Beispiel für Yii2, das eine dreistufige Verknüpfung zwischen Provinzen und Gemeinden in China realisiert

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Native JS implementiert den Marquee-EffektNächster Artikel：Native JS implementiert den Marquee-Effekt

In Verbindung stehende Artikel

Mehr sehen