級聯(lián)菜單的實現(xiàn)

下面是一個級聯(lián)菜單的實現(xiàn)案例：

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

?

當(dāng)你選擇了某個城市之后，如果在這個市里還其他的地區(qū)就會再次出現(xiàn)一個下拉菜單：

第三個下拉菜單就是對應(yīng)的區(qū)域：

?

下面就是相應(yīng)的js代碼：

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

//上一行的代碼是引用外部的js文件，該文件中是存儲相應(yīng)的省份、城市、地區(qū)的名稱數(shù)組

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

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

你可以仿照上面的添加內(nèi)容就可以了

//下面就是實現(xiàn)級聯(lián)菜單的主要邏輯：

<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");//這是對應(yīng)的下來菜單的id（只需修改這里就可以用了）var region2 = document.getElementById("region2");//這是對應(yīng)的下來菜單的idvar region3 = document.getElementById("region3");//這是對應(yīng)的下來菜單的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>??

區(qū)域：<select id="region3" name="region3"></select>??

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。