本文實(shí)例講述了JS實(shí)現(xiàn)的五級聯(lián)動(dòng)菜單效果。分享給大家供大家參考，具體如下：
js實(shí)現(xiàn)多級聯(lián)動(dòng)的方法很多，這里給出一種5級聯(lián)動(dòng)的例子，其實(shí)可以擴(kuò)展成N級聯(lián)動(dòng),在做項(xiàng)目的時(shí)候碰到了這樣一個(gè)問題但是有不能從數(shù)據(jù)庫中動(dòng)態(tài)的加載這些選項(xiàng)，所以只有想辦法從單個(gè)的頁面著手來處理了，應(yīng)為項(xiàng)目的表單是動(dòng)態(tài)產(chǎn)生的，所以需要每個(gè)流程的設(shè)計(jì)過程中需要有單獨(dú)的頁面來處理，這樣就決定了不能改變已有的業(yè)務(wù)邏輯來實(shí)現(xiàn)多級表單的聯(lián)動(dòng)。
運(yùn)行效果圖如下：
完整代碼如下：
<html><head><title>級聯(lián)</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style> body,select { font-size:9pt; font-family:Verdana; } a { color:red; text-decoration:none; } a:hover { text-decoration:underline; }</style><SCRIPT LANGUAGE="JavaScript">function Dsy(){ this.Items = {};}Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray;}Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined") return false; return true;}function change(v){ var str="0"; for(i=0;i<v;i++) { str+=("_"+(document.getElementById(s[i]).selectedIndex-1)); }; var ss=document.getElementById(s[v]); with(ss) { length = 0; options[0]=new Option(opt0[v],opt0[v]); if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v) { if(dsy.Exists(str)) { ar = dsy.Items[str]; for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]); if(v)options[1].selected = true; } } if(++v<s.length) { change(v); } }}var dsy = new Dsy();dsy.add("0",["投訴申告","業(yè)務(wù)咨詢","用戶預(yù)約","服務(wù)調(diào)度","其它"]);dsy.add("0_0",["標(biāo)準(zhǔn)化產(chǎn)品","行業(yè)產(chǎn)品","服務(wù)類產(chǎn)品","客戶服務(wù)"]);dsy.add("0_0_0",["語音類","接入類","短信類","其它"]);dsy.add("0_0_0_0",["短號集群網(wǎng)","集團(tuán)VPMN","移動(dòng)總機(jī)","集團(tuán)總機(jī)","集團(tuán)彩鈴","V網(wǎng)伴侶"]);dsy.add("0_0_0_0_0",["否認(rèn)辦理","撥打空號","二次確認(rèn)短信問題","短信查詢短號信息問題","BOSS系統(tǒng)故障","其它"]);dsy.add("0_0_0_0_1",["否認(rèn)辦理","其它"]);dsy.add("0_0_0_0_2",["撥打空號","BOSS系統(tǒng)故障","撥打提示【關(guān)機(jī)】"]);dsy.add("0_0_0_0_3",["其它"]);dsy.add("0_0_0_0_4",["否認(rèn)辦理","整個(gè)集團(tuán)鈴音丟失","系統(tǒng)故障","資費(fèi)誤收","無法聽到集團(tuán)彩鈴","BOSS系統(tǒng)故障","鈴音設(shè)置","其它"]);dsy.add("0_0_0_0_5",["否認(rèn)辦理","其它"]);dsy.add("0_0_0_1",["GPRS企業(yè)接入","手機(jī)郵箱（pushmail）","Blackberry","IP專線"]);dsy.add("0_0_0_1_0",["資費(fèi)誤收","終端無法接收","BOSS系統(tǒng)故障","其它"]);dsy.add("0_0_0_1_1",["套餐","終端無法接收","BOSS系統(tǒng)故障","其它"]);dsy.add("0_0_0_1_2",["套餐","終端無法接收","BOSS系統(tǒng)故障","其它"]);dsy.add("0_0_0_1_3",["數(shù)據(jù)專線","語音專線"]);dsy.add("0_0_0_2",["企信通","短信直連（MAS）","3M"]);dsy.add("0_0_0_2_0",["無法發(fā)送短信","終端無法接收","BOSS系統(tǒng)故障","資費(fèi)誤收","無法登陸","其它"]);dsy.add("0_0_0_2_1",["無法發(fā)送短信","終端無法接收","BOSS系統(tǒng)故障","資費(fèi)誤收","無法登陸","其它"]);dsy.add("0_0_0_2_2",["無法發(fā)送短信","終端無法接收","資費(fèi)誤收","無法登陸","其它"]);dsy.add("0_0_0_3",["移動(dòng)字典","企業(yè)郵箱","其它"]);dsy.add("0_0_0_3_0",["無法登陸","其它"]);dsy.add("0_0_1",["校訊通","財(cái)訊通","警務(wù)通","銀信通","城管通","政務(wù)通","物流通","其它"]);dsy.add("0_0_1_0",["否認(rèn)辦理","資費(fèi)誤收","終端延時(shí)（或無法）接收","其它"]);dsy.add("0_0_1_1",["否認(rèn)辦理","資費(fèi)誤收","終端延時(shí)（或無法）接收","其它"]);dsy.add("0_0_1_2",["終端延時(shí)（或無法）接收","其它"]);dsy.add("0_0_1_3",["否認(rèn)辦理","資費(fèi)誤收","終端延時(shí)（或無法）接收","其它"]);dsy.add("0_0_1_4",["否認(rèn)辦理","資費(fèi)誤收","終端延時(shí)（或無法）接收","其它"]);dsy.add("0_0_1_5",["否認(rèn)辦理","資費(fèi)誤收","終端延時(shí)（或無法）接收","其它"]);dsy.add("0_0_1_6",["否認(rèn)辦理","資費(fèi)誤收","終端延時(shí)（或無法）接收","其它"]);dsy.add("0_0_1_7",["其它"]);dsy.add("0_0_2",["跨市VPMN","跨市短號集群網(wǎng)","集團(tuán)代付"]);dsy.add("0_0_2_0",["互聯(lián)互通","資費(fèi)誤收","其它"]);dsy.add("0_0_2_1",["互聯(lián)互通","資費(fèi)誤收","其它"]);dsy.add("0_0_2_2",["互聯(lián)互通","資費(fèi)誤收","其它"]);dsy.add("0_0_3",["客戶經(jīng)理","服務(wù)廳","分銷商","產(chǎn)品開發(fā)商"]);dsy.add("0_0_3_0",["服務(wù)態(tài)度","業(yè)務(wù)受理延時(shí)","業(yè)務(wù)受理錯(cuò)誤","聯(lián)系無應(yīng)答"]);dsy.add("0_0_3_1",["服務(wù)態(tài)度","業(yè)務(wù)受理延時(shí)","業(yè)務(wù)受理錯(cuò)誤","聯(lián)系無應(yīng)答"]);dsy.add("0_0_3_2",["服務(wù)態(tài)度","業(yè)務(wù)受理延時(shí)","業(yè)務(wù)受理錯(cuò)誤","聯(lián)系無應(yīng)答"]);dsy.add("0_0_3_3",["服務(wù)態(tài)度","業(yè)務(wù)受理延時(shí)","業(yè)務(wù)受理錯(cuò)誤","聯(lián)系無應(yīng)答"]);dsy.add("0_1",["標(biāo)準(zhǔn)化產(chǎn)品","行業(yè)產(chǎn)品","服務(wù)類產(chǎn)品"]);dsy.add("0_1_0",["短號集群網(wǎng)","移動(dòng)總機(jī)","集團(tuán)總機(jī)","集團(tuán)彩鈴","V網(wǎng)伴侶","GPRS企業(yè)接入","手機(jī)郵箱（pushmail）","Blackberry","IP專線","企信通","短信直連（MAS）","企業(yè)郵箱","移動(dòng)字典"]);dsy.add("0_1_0_0",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_1",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_2",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_3",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_4",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_5",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_6",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_7",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_8",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_9",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_10",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_11",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_0_12",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1",["校訊通","財(cái)訊通","警務(wù)通","銀信通","城管通","政務(wù)通","物流通","其它"]);dsy.add("0_1_1_0",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1_1",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1_2",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1_3",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1_4",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1_5",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1_6",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_1_7",["其它"]);dsy.add("0_1_2",["跨市VPMN","跨市短號集群網(wǎng)","集團(tuán)代付"]);dsy.add("0_1_2_0",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_2_1",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_1_2_2",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營銷方案"]);dsy.add("0_2",["產(chǎn)品申請","其它"]);dsy.add("0_2_0",["新建短號集群網(wǎng)","新建集團(tuán)彩鈴","新建手機(jī)郵箱","新建移動(dòng)總機(jī)","新建集團(tuán)總機(jī)","新建Blackberry","新建IP專線","新建短信直連","新建企信通","其它"]);dsy.add("0_2_1",["其它"]);dsy.add("0_3",["上門（駐點(diǎn)）服務(wù)","電話服務(wù)","其它"]);dsy.add("0_3_0",["客戶經(jīng)理","企信通開發(fā)商","移動(dòng)總機(jī)開發(fā)商","移動(dòng)名片開發(fā)商","Blackberry開發(fā)商","手機(jī)郵箱開發(fā)商","校訊通合作商","財(cái)信通合作商","物流通合作商","其它"]);dsy.add("0_3_1",["客戶經(jīng)理","企信通開發(fā)商","移動(dòng)總機(jī)開發(fā)商","移動(dòng)名片開發(fā)商","Blackberry開發(fā)商","手機(jī)郵箱開發(fā)商","校訊通合作商","財(cái)信通合作商","物流通合作商","其它"]);</SCRIPT><SCRIPT language = "javascript">var s=["s1","s2","s3","s4","s5"];var opt0 = ["一級選擇","二級選擇","三級選擇","四級選擇","五級選擇"];function setup(){ for(i=0;i<s.length-1;i++) document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")"); change(0);}</SCRIPT></head><body bgcolor="#E0E0E0" onLoad="setup()" style="margin:0"><form name="frm"><select id="s1"><option>一級選擇</option></select><select id="s2"><option>二級選擇</option></select><select id="s3"><option>三級選擇</option></select><select id="s4"><option>四級選擇</option></select><select id="s5"><option>五級選擇</option></select></form></body></html>更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
