집 > 기사 > 웹 프론트엔드 > js는 지방자치단체의 3단계 연계 메뉴 효과를 구현합니다.

js는 지방자치단체의 3단계 연계 메뉴 효과를 구현합니다.

高洛峰원래의: 2017-03-23 14:11:122255검색

이 글에서는 지방자치단체의 3단계 연계 메뉴 효과를 구현하기 위한 js의 샘플 코드를 주로 공유합니다. 참고할만한 가치가 아주 좋습니다.

효과는 다음과 같습니다.

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

코드는 다음과 같습니다.

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

성, 자치단체에서 3단계 연계 메뉴 효과를 구현하기 위한 js가 더 많아지려면 PHP에 주의하세요. 관련 기사를 볼 수 있는 중국 사이트!