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

2247 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