當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现的五级联动菜单效果完整实例
生活随笔
收集整理的這篇文章主要介紹了
JS实现的五级联动菜单效果完整实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://www.jb51.net/article/106525.htm
本文實例講述了JS實現的五級聯動菜單效果。分享給大家供大家參考，具體如下：
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()" 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>?
總結
以上是生活随笔為你收集整理的JS实现的五级联动菜单效果完整实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OSM数据的获取及格式转换
- 下一篇： HTML期末大作业~ 仿新浪微博个人主页