jsで道州市の3階層連携メニュー効果を実現-jsチュートリアル-php.cn

jsで道州市の3階層連携メニュー効果を実現

高洛峰

リリース： 2017-03-23 14:11:12

オリジナル

2198 人が閲覧しました

この記事では主に、道州市の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段階連携メニューエフェクト関連の記事はPHP中国語サイトにご注目ください！

PHPを使って都市部で3階層連携を実現データベース付き

ajaxの3階層連携ドロップダウンメニューを実装するサンプルコード

Yii2 3階層連携を実現する例中国の省と直轄市のレベルの連携