JS代碼實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單（1）

2012/11/2 20:19:40作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

菜單三級(jí)聯(lián)動(dòng)菜單（1）

【實(shí)例描述】

三級(jí)聯(lián)動(dòng)菜單是常用的一種選擇方式，通過(guò)這種方式，用戶可以更方便地選擇數(shù)據(jù)，同時(shí)還能降低選擇的失誤率。本例學(xué)習(xí)如何制作三級(jí)聯(lián)動(dòng)菜單，實(shí)現(xiàn)方法是普通事件的捕獲。

【實(shí)例代碼】

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（yzddtk.cn）</title>
<STYLE>
body { font-size: 11px; font-family: 
Verdana;background:#ececec;color:#666666;}
select { font-size: 11px; font-family: Verdana;
vertical-align: middle;margin: 3px;background:#ececec;color:#666666;}
</STYLE>
<div id="myDiv">&nbsp;</div>
<SCRIPT LANGUAGE="JavaScript" DEFER>
var cMenu = ["上海","北京","深圳","濟(jì)南"]
var cValue = ["shanghai","beijing","shenzhen","jinan"]
var aMenu = [["楊浦區(qū)","徐匯區(qū)","黃浦區(qū)","浦東新區(qū)"],
["豐臺(tái)區(qū)","海淀區(qū)"],["福田","寶安"],["市中","歷下"]]
var aValue = [["yp","xh","hp","pd"],["ft","hd"],["ft","ba"],["sz","lx"]]
var dMenu = [[["市光新村","工農(nóng)三村"],["徐匯新村","徐匯高樓"],
["黃浦樓宇","外灘風(fēng)景"],["浦東地鐵","浦東機(jī)場(chǎng)"]],[["豐臺(tái)體育館","造甲村"],
["亞運(yùn)村"]],[["蓮花山","商報(bào)大廈"],["深圳寶安機(jī)場(chǎng)","寶安開(kāi)發(fā)區(qū)"]],
[["山莊賓館","山莊大酒店"],["千佛山東門(mén)","千佛山醫(yī)院"]]]
var oDiv = document.all.myDiv;
var ocMenu = document.createElement("<SELECT name='city'>");  
//創(chuàng)建城市列表框
var oaMenu = document.createElement("<SELECT name='cityArea'>"); 
 //創(chuàng)建區(qū)域列表框
var odMenu = document.createElement("<SELECT name='cityAddress'>"); 
//創(chuàng)建地址列表框
with(oDiv)appendChild(ocMenu),appendChild(oaMenu),appendChild(odMenu);
//將以上三個(gè)列表框添加到div中
createMainOptions();
createSubOptions(0);
createSub2Options(0,0);
ocMenu.onchange = function() {//綁定城市下拉框的選擇事件
    createSubOptions(this.selectedIndex);
createSub2Options(this.selectedIndex,oaMenu.selectedIndex);};
oaMenu.onchange = function() {//綁定區(qū)域下拉框的選擇事件
    createSub2Options(ocMenu.selectedIndex,this.selectedIndex);};
function createMainOptions() {
    for(var i=0;i<cMenu.length;i++)ocMenu.options[i] =
 new Option(cMenu[i],cValue[i]);//填充城市列表框內(nèi)容
}
function createSubOptions(j) {
    with(oaMenu) {
        length=0;     //填充區(qū)域列表框內(nèi)容
        for(var i=0;i<aMenu[j].length;i++)oaMenu.options[i]
 = new Option(aMenu[j][i],aValue[j][i]);
    }
}
function createSub2Options(j,k) {
    with(odMenu) {
        length=0;   
//填充地址列表框內(nèi)容
        for(var i=0;i<dMenu[j][k].length;i++)
odMenu.options[i] = new Option(dMenu[j][k][i]);
    }
}
ocMenu[1].selected=true;
ocMenu.fireEvent("onchange");
</SCRIPT>
</head>
<body>
</body>
</html>

【運(yùn)行效果】

三級(jí)聯(lián)動(dòng)菜單運(yùn)行效果

【難點(diǎn)剖析】

本例中使用數(shù)組定義了3個(gè)級(jí)別下拉框的內(nèi)容，然后使用“createElement”動(dòng)態(tài)創(chuàng)建了3個(gè)下拉框，并使用“appendChild”將下拉框添加到指定的div層中。為了實(shí)現(xiàn)聯(lián)動(dòng)效果，還動(dòng)態(tài)設(shè)置了這3個(gè)下拉框的“onchange”事件。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：三級(jí)聯(lián)動(dòng)菜單進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS代碼菜單