這篇文章主要為大家展示了“JS如何實現五級聯動菜單效果”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“JS如何實現五級聯動菜單效果”這篇文章吧。
創新互聯專注為客戶提供全方位的互聯網綜合服務,包含不限于成都網站設計、網站制作、曾都網絡推廣、微信小程序、曾都網絡營銷、曾都企業策劃、曾都品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創新互聯為所有大學生創業者提供曾都建站搭建服務,24小時服務熱線:18982081108,官方網址:www.2m8n56k.cn
js實現多級聯動的方法很多,這里給出一種5級聯動的例子,其實可以擴展成N級聯動,在做項目的時候碰到了這樣一個問題但是有不能從數據庫中動態的加載這些選項,所以只有想辦法從單個的頁面著手來處理了,應為項目的表單是動態產生的,所以需要每個流程的設計過程中需要有單獨的頁面來處理,這樣就決定了不能改變已有的業務邏輯來實現多級表單的聯動。
運行效果圖如下:
完整代碼如下:
<html> <head> <title>級聯</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",["投訴申告","業務咨詢","用戶預約","服務調度","其它"]); dsy.add("0_0",["標準化產品","行業產品","服務類產品","客戶服務"]); dsy.add("0_0_0",["語音類","接入類","短信類","其它"]); dsy.add("0_0_0_0",["短號集群網","集團VPMN","移動總機","集團總機","集團彩鈴","V網伴侶"]); dsy.add("0_0_0_0_0",["否認辦理","撥打空號","二次確認短信問題","短信查詢短號信息問題","BOSS系統故障","其它"]); dsy.add("0_0_0_0_1",["否認辦理","其它"]); dsy.add("0_0_0_0_2",["撥打空號","BOSS系統故障","撥打提示【關機】"]); dsy.add("0_0_0_0_3",["其它"]); dsy.add("0_0_0_0_4",["否認辦理","整個集團鈴音丟失","系統故障","資費誤收","無法聽到集團彩鈴","BOSS系統故障","鈴音設置","其它"]); dsy.add("0_0_0_0_5",["否認辦理","其它"]); dsy.add("0_0_0_1",["GPRS企業接入","手機郵箱(pushmail)","Blackberry","IP專線"]); dsy.add("0_0_0_1_0",["資費誤收","終端無法接收","BOSS系統故障","其它"]); dsy.add("0_0_0_1_1",["套餐","終端無法接收","BOSS系統故障","其它"]); dsy.add("0_0_0_1_2",["套餐","終端無法接收","BOSS系統故障","其它"]); dsy.add("0_0_0_1_3",["數據專線","語音專線"]); dsy.add("0_0_0_2",["企信通","短信直連(MAS)","3M"]); dsy.add("0_0_0_2_0",["無法發送短信","終端無法接收","BOSS系統故障","資費誤收","無法登陸","其它"]); dsy.add("0_0_0_2_1",["無法發送短信","終端無法接收","BOSS系統故障","資費誤收","無法登陸","其它"]); dsy.add("0_0_0_2_2",["無法發送短信","終端無法接收","資費誤收","無法登陸","其它"]); dsy.add("0_0_0_3",["移動字典","企業郵箱","其它"]); dsy.add("0_0_0_3_0",["無法登陸","其它"]); dsy.add("0_0_1",["校訊通","財訊通","警務通","銀信通","城管通","政務通","物流通","其它"]); dsy.add("0_0_1_0",["否認辦理","資費誤收","終端延時(或無法)接收","其它"]); dsy.add("0_0_1_1",["否認辦理","資費誤收","終端延時(或無法)接收","其它"]); dsy.add("0_0_1_2",["終端延時(或無法)接收","其它"]); dsy.add("0_0_1_3",["否認辦理","資費誤收","終端延時(或無法)接收","其它"]); dsy.add("0_0_1_4",["否認辦理","資費誤收","終端延時(或無法)接收","其它"]); dsy.add("0_0_1_5",["否認辦理","資費誤收","終端延時(或無法)接收","其它"]); dsy.add("0_0_1_6",["否認辦理","資費誤收","終端延時(或無法)接收","其它"]); dsy.add("0_0_1_7",["其它"]); dsy.add("0_0_2",["跨市VPMN","跨市短號集群網","集團代付"]); dsy.add("0_0_2_0",["互聯互通","資費誤收","其它"]); dsy.add("0_0_2_1",["互聯互通","資費誤收","其它"]); dsy.add("0_0_2_2",["互聯互通","資費誤收","其它"]); dsy.add("0_0_3",["客戶經理","服務廳","分銷商","產品開發商"]); dsy.add("0_0_3_0",["服務態度","業務受理延時","業務受理錯誤","聯系無應答"]); dsy.add("0_0_3_1",["服務態度","業務受理延時","業務受理錯誤","聯系無應答"]); dsy.add("0_0_3_2",["服務態度","業務受理延時","業務受理錯誤","聯系無應答"]); dsy.add("0_0_3_3",["服務態度","業務受理延時","業務受理錯誤","聯系無應答"]); dsy.add("0_1",["標準化產品","行業產品","服務類產品"]); dsy.add("0_1_0",["短號集群網","移動總機","集團總機","集團彩鈴","V網伴侶","GPRS企業接入","手機郵箱(pushmail)","Blackberry","IP專線","企信通","短信直連(MAS)","企業郵箱","移動字典"]); dsy.add("0_1_0_0",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_1",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_2",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_3",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_4",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_5",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_6",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_7",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_8",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_9",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_10",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_11",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_0_12",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1",["校訊通","財訊通","警務通","銀信通","城管通","政務通","物流通","其它"]); dsy.add("0_1_1_0",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1_1",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1_2",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1_3",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1_4",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1_5",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1_6",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_1_7",["其它"]); dsy.add("0_1_2",["跨市VPMN","跨市短號集群網","集團代付"]); dsy.add("0_1_2_0",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_2_1",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_1_2_2",["業務辦理條件及流程","產品使用功能","資費計費介紹","系統操作指引","營銷方案"]); dsy.add("0_2",["產品申請","其它"]); dsy.add("0_2_0",["新建短號集群網","新建集團彩鈴","新建手機郵箱","新建移動總機","新建集團總機","新建Blackberry","新建IP專線","新建短信直連","新建企信通","其它"]); dsy.add("0_2_1",["其它"]); dsy.add("0_3",["上門(駐點)服務","電話服務","其它"]); dsy.add("0_3_0",["客戶經理","企信通開發商","移動總機開發商","移動名片開發商","Blackberry開發商","手機郵箱開發商","校訊通合作商","財信通合作商","物流通合作商","其它"]); dsy.add("0_3_1",["客戶經理","企信通開發商","移動總機開發商","移動名片開發商","Blackberry開發商","手機郵箱開發商","校訊通合作商","財信通合作商","物流通合作商","其它"]); </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()" > <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>
以上是“JS如何實現五級聯動菜單效果”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!
新聞標題:JS如何實現五級聯動菜單效果
轉載注明:http://www.2m8n56k.cn/article20/ihghjo.html
成都網站建設公司_創新互聯,為您提供App設計、商城網站、手機網站建設、網站內鏈、服務器托管、移動網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:[email protected]。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯