JS如何實(shí)現(xiàn)五級(jí)聯(lián)動(dòng)菜單效果
這篇文章主要為大家展示了“JS如何實(shí)現(xiàn)五級(jí)聯(lián)動(dòng)菜單效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何實(shí)現(xiàn)五級(jí)聯(lián)動(dòng)菜單效果”這篇文章吧。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、曾都網(wǎng)絡(luò)推廣、微信小程序、曾都網(wǎng)絡(luò)營(yíng)銷、曾都企業(yè)策劃、曾都品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供曾都建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn
js實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)的方法很多，這里給出一種5級(jí)聯(lián)動(dòng)的例子，其實(shí)可以擴(kuò)展成N級(jí)聯(lián)動(dòng),在做項(xiàng)目的時(shí)候碰到了這樣一個(gè)問題但是有不能從數(shù)據(jù)庫(kù)中動(dòng)態(tài)的加載這些選項(xiàng)，所以只有想辦法從單個(gè)的頁(yè)面著手來處理了，應(yīng)為項(xiàng)目的表單是動(dòng)態(tài)產(chǎn)生的，所以需要每個(gè)流程的設(shè)計(jì)過程中需要有單獨(dú)的頁(yè)面來處理，這樣就決定了不能改變已有的業(yè)務(wù)邏輯來實(shí)現(xiàn)多級(jí)表單的聯(lián)動(dòng)。
運(yùn)行效果圖如下：
完整代碼如下：
<html>
<head>
<title>級(jí)聯(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",["短號(hào)集群網(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)辦理","撥打空號(hào)","二次確認(rèn)短信問題","短信查詢短號(hào)信息問題","BOSS系統(tǒng)故障","其它"]);
dsy.add("0_0_0_0_1",["否認(rèn)辦理","其它"]);
dsy.add("0_0_0_0_2",["撥打空號(hào)","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","跨市短號(hào)集群網(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",["短號(hào)集群網(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)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_1",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_2",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_3",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_4",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_5",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_6",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_7",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_8",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_9",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_10",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_11",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_0_12",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yí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)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_1_1",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_1_2",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_1_3",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_1_4",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_1_5",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_1_6",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_1_7",["其它"]);
dsy.add("0_1_2",["跨市VPMN","跨市短號(hào)集群網(wǎng)","集團(tuán)代付"]);
dsy.add("0_1_2_0",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_2_1",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_1_2_2",["業(yè)務(wù)辦理?xiàng)l件及流程","產(chǎn)品使用功能","資費(fèi)計(jì)費(fèi)介紹","系統(tǒng)操作指引","營(yíng)銷方案"]);
dsy.add("0_2",["產(chǎn)品申請(qǐng)","其它"]);
dsy.add("0_2_0",["新建短號(hào)集群網(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 = ["一級(jí)選擇","二級(jí)選擇","三級(jí)選擇","四級(jí)選擇","五級(jí)選擇"];
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()" >
<form name="frm">
<select id="s1"><option>一級(jí)選擇</option></select>
<select id="s2"><option>二級(jí)選擇</option></select>
<select id="s3"><option>三級(jí)選擇</option></select>
<select id="s4"><option>四級(jí)選擇</option></select>
<select id="s5"><option>五級(jí)選擇</option></select>
</form>
</body>
</html>以上是“JS如何實(shí)現(xiàn)五級(jí)聯(lián)動(dòng)菜單效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞標(biāo)題：JS如何實(shí)現(xiàn)五級(jí)聯(lián)動(dòng)菜單效果
轉(zhuǎn)載注明：http://muchs.cn/article20/ihghjo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、服務(wù)器托管、移動(dòng)網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 分析百度關(guān)鍵詞優(yōu)化搜索結(jié)果排名中手機(jī)與PC的差異 2016-11-14
- 提高采集內(nèi)容收錄量和排名的方法是什么？ 2013-10-25
- 導(dǎo)致企業(yè)網(wǎng)站營(yíng)銷效果不佳的原因有哪些? 2022-09-14
- SEO優(yōu)化頁(yè)面長(zhǎng)期沒收錄 能刪除嗎？ 2013-07-02
- 網(wǎng)站改版不如重做，個(gè)性化營(yíng)銷成為主流 2014-12-29
- 怎么判斷關(guān)鍵詞優(yōu)化的難易度 2016-11-02
- 公眾號(hào)刷點(diǎn)擊率結(jié)構(gòu)優(yōu)化對(duì)搜索引擎的重要性 2013-04-26
- 網(wǎng)絡(luò)營(yíng)銷--營(yíng)銷型網(wǎng)站建設(shè) 2016-10-08
- 企業(yè)建站到推廣如何做好網(wǎng)站 2016-11-12
- 如何觀察不合格的成都網(wǎng)站營(yíng)銷推廣？ 2022-07-13
- 怎么通過收錄量提升網(wǎng)站排名 2013-05-28
- 網(wǎng)站營(yíng)銷需要一個(gè)適當(dāng)?shù)那腥朦c(diǎn) 2022-05-02