js realisiert den dreistufigen Verknüpfungsmenüeffekt von Provinzen und Gemeinden-js-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-03-23 14:11:12

Original

2229 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

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