js realizes the three-level linkage menu effect of provinces and municipalities-JS Tutorial-php.cn

js realizes the three-level linkage menu effect of provinces and municipalities

高洛峰

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

Original

2254 people have browsed it

This article mainly shares the sample code of js to realize the effect of three-level linkage menu in provinces and municipalities. It has a very good reference value. Let’s take a look at it with the editor.

The effect is as follows:

js 实现省市区三级联动菜单效果

Code As follows:

<!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>

Copy after login

For more js to achieve the effect of three-level linkage menus in provinces and municipalities, please pay attention to the PHP Chinese website for related articles!

Use PHP to implement three-level linkage in urban areas with attached database

Instance code to implement ajax three-level linkage drop-down menu

Yii2 implementation example of three-level linkage between provinces and municipalities in China