級聯菜單的實現

下面是一個級聯菜單的實現案例：

選擇廣東省之后，在第二個下拉菜單就會顯示相應的城市名稱：

?

當你選擇了某個城市之后，如果在這個市里還其他的地區就會再次出現一個下拉菜單：

第三個下拉菜單就是對應的區域：

?

下面就是相應的js代碼：

<script type="text/javascript" src="sitedata_bas.js" charset="GBK"></script>

//上一行的代碼是引用外部的js文件，該文件中是存儲相應的省份、城市、地區的名稱數組

由于這個js文件中的數據比較大，在這里就列出部分：

var arrCity =[{ name:"請選擇", sub:[{name:"請選擇"}], type:1},{name:"北京",sub:[{name:"請選擇"},{name:"東城區"},{name:"西城區"},{name:"崇文區"},{name:"宣武區"},{name:"朝陽區"},{name:"海淀區"},{name:"豐臺區"},{name:"石景山區"},{name:"房山區"},{name:"通州區"},{name:"順義區"},{name:"昌平區"},{name:"大興區"},{name:"懷柔區"},{name:"平谷區"},{name:"門頭溝區"},{name:"密云縣"},{name:"延慶縣"},{name:"其他"}],type:0},{name:"廣東",sub:[{name:"請選擇",sub:[]},]

你可以仿照上面的添加內容就可以了

//下面就是實現級聯菜單的主要邏輯：

<script>var Utils = {};Utils.addEvent = function(el, type, func) {if (document.addEventListener) {el.addEventListener(type, func, false);} else if (document.attachEvent) {el.attachEvent('on' + type, func);}};Utils.addEvent(window, 'load', function() {var region1 = document.getElementById("region1");//這是對應的下來菜單的id（只需修改這里就可以用了）var region2 = document.getElementById("region2");//這是對應的下來菜單的idvar region3 = document.getElementById("region3");//這是對應的下來菜單的idfor ( var i = 0; i < arrCity.length; i++) {region1.options[i] = new Option(arrCity[i].name, arrCity[i].name);}region2.options[0] = new Option("請選擇", "請選擇");region3.style.display = "none";Utils.addEvent(region1, 'change', function() {var region1_obj = arrCity[region1.selectedIndex];var region2_arr = region1_obj.sub;region2.options.length = 0;region3.options.length = 0;region3.style.display = "none";for ( var i = 0; i < region2_arr.length; i++) {region2.options[i] = new Option(region2_arr[i].name, region2_arr[i].name);}});Utils.addEvent(region2, 'change', function() {var region1_obj = arrCity[region1.selectedIndex];var region2_obj = region1_obj.sub[region2.selectedIndex];var region3_arr = region2_obj.sub;if (region2_obj.type == 0) {region3.options.length = 0;region3.style.display = "inline";for ( var i = 0; i < region3_arr.length; i++) {region3.options[i] = new Option(region3_arr[i].name, region3_arr[i].name);}} else {region3.style.display = "none";}});});</script>

?

在頁面中你需要寫的除了上面的js代碼外，還要寫出三個下拉菜單：

省份：<select id="region1" name="region1"></select>??

城市：<select id="region2" name="region2"></select>??

區域：<select id="region3" name="region3"></select>??

?

總結

以上是生活随笔為你收集整理的级联菜单显示省份的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。