ホームページ > 記事 > ウェブフロントエンド > jsで道州市の3階層連携メニュー効果を実現
jsで道州市の3階層連携メニュー効果を実現
- 高洛峰オリジナル
- 2017-03-23 14:11:122229ブラウズ
この記事では主に、道州市の3階層連携メニュー効果を実現するための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中国語サイトにご注目ください！
関連記事:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。