快捷導航

js 實現(xiàn)省市區(qū)三級聯(lián)動菜單效果

更新時間：2017年02月20日 10:18:52 作者：nick906

本文主要分享了js實現(xiàn)省市區(qū)三級聯(lián)動菜單效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧

效果如下：

代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>省市區(qū)三級聯(lián)動</title>
</head>
<body>
 <form>
 <select id="province">
 <option>請選擇省份</option>
 </select>
 <select id="city">
 <option>請選擇城市</option>
 </select>
 <select id="district">
 <option>請選擇區(qū)域</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 = "";
 // 封裝更新選擇列表函數(shù)
 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);
 })
 }
 // 將數(shù)據(jù)按省、市、地區(qū)分別存儲
 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);
 // 監(jiān)聽一級省份選擇列表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);
 })
 // 監(jiān)聽二級城市選擇列表change事件，更新三級區(qū)域列表
 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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: