亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS實現(xiàn)的五級聯(lián)動菜單效果完整實例

 更新時間：2017年02月23日 10:39:46   作者：藍之風(fēng)  
這篇文章主要介紹了JS實現(xiàn)的五級聯(lián)動菜單效果,結(jié)合完整實例形式分析了js多級聯(lián)動菜單的完整實現(xiàn)步驟,涉及JS數(shù)組遍歷、擴展及元素節(jié)點操作相關(guān)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)的五級聯(lián)動菜單效果。分享給大家供大家參考，具體如下：

js實現(xiàn)多級聯(lián)動的方法很多，這里給出一種5級聯(lián)動的例子，其實可以擴展成N級聯(lián)動,在做項目的時候碰到了這樣一個問題但是有不能從數(shù)據(jù)庫中動態(tài)的加載這些選項，所以只有想辦法從單個的頁面著手來處理了，應(yīng)為項目的表單是動態(tài)產(chǎn)生的，所以需要每個流程的設(shè)計過程中需要有單獨的頁面來處理，這樣就決定了不能改變已有的業(yè)務(wù)邏輯來實現(xiàn)多級表單的聯(liá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)","集團VPMN","移動總機","集團總機","集團彩鈴","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)機】"]);
dsy.add("0_0_0_0_3",["其它"]);
dsy.add("0_0_0_0_4",["否認(rèn)辦理","整個集團鈴音丟失","系統(tǒng)故障","資費誤收","無法聽到集團彩鈴","BOSS系統(tǒng)故障","鈴音設(shè)置","其它"]);
dsy.add("0_0_0_0_5",["否認(rèn)辦理","其它"]);
dsy.add("0_0_0_1",["GPRS企業(yè)接入","手機郵箱（pushmail）","Blackberry","IP專線"]);
dsy.add("0_0_0_1_0",["資費誤收","終端無法接收","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)故障","資費誤收","無法登陸","其它"]);
dsy.add("0_0_0_2_1",["無法發(fā)送短信","終端無法接收","BOSS系統(tǒng)故障","資費誤收","無法登陸","其它"]);
dsy.add("0_0_0_2_2",["無法發(fā)送短信","終端無法接收","資費誤收","無法登陸","其它"]);
dsy.add("0_0_0_3",["移動字典","企業(yè)郵箱","其它"]);
dsy.add("0_0_0_3_0",["無法登陸","其它"]);
dsy.add("0_0_1",["校訊通","財訊通","警務(wù)通","銀信通","城管通","政務(wù)通","物流通","其它"]);
dsy.add("0_0_1_0",["否認(rèn)辦理","資費誤收","終端延時（或無法）接收","其它"]);
dsy.add("0_0_1_1",["否認(rèn)辦理","資費誤收","終端延時（或無法）接收","其它"]);
dsy.add("0_0_1_2",["終端延時（或無法）接收","其它"]);
dsy.add("0_0_1_3",["否認(rèn)辦理","資費誤收","終端延時（或無法）接收","其它"]);
dsy.add("0_0_1_4",["否認(rèn)辦理","資費誤收","終端延時（或無法）接收","其它"]);
dsy.add("0_0_1_5",["否認(rèn)辦理","資費誤收","終端延時（或無法）接收","其它"]);
dsy.add("0_0_1_6",["否認(rèn)辦理","資費誤收","終端延時（或無法）接收","其它"]);
dsy.add("0_0_1_7",["其它"]);
dsy.add("0_0_2",["跨市VPMN","跨市短號集群網(wǎng)","集團代付"]);
dsy.add("0_0_2_0",["互聯(lián)互通","資費誤收","其它"]);
dsy.add("0_0_2_1",["互聯(lián)互通","資費誤收","其它"]);
dsy.add("0_0_2_2",["互聯(lián)互通","資費誤收","其它"]);
dsy.add("0_0_3",["客戶經(jīng)理","服務(wù)廳","分銷商","產(chǎn)品開發(fā)商"]);
dsy.add("0_0_3_0",["服務(wù)態(tài)度","業(yè)務(wù)受理延時","業(yè)務(wù)受理錯誤","聯(lián)系無應(yīng)答"]);
dsy.add("0_0_3_1",["服務(wù)態(tài)度","業(yè)務(wù)受理延時","業(yè)務(wù)受理錯誤","聯(lián)系無應(yīng)答"]);
dsy.add("0_0_3_2",["服務(wù)態(tài)度","業(yè)務(wù)受理延時","業(yè)務(wù)受理錯誤","聯(lián)系無應(yīng)答"]);
dsy.add("0_0_3_3",["服務(wù)態(tài)度","業(yè)務(wù)受理延時","業(yè)務(wù)受理錯誤","聯(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)","移動總機","集團總機","集團彩鈴","V網(wǎng)伴侶","GPRS企業(yè)接入","手機郵箱（pushmail）","Blackberry","IP專線","企信通","短信直連（MAS）","企業(yè)郵箱","移動字典"]);
dsy.add("0_1_0_0",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_1",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_2",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_3",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_4",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_5",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_6",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_7",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_8",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_9",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_10",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_11",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_0_12",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1",["校訊通","財訊通","警務(wù)通","銀信通","城管通","政務(wù)通","物流通","其它"]);
dsy.add("0_1_1_0",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1_1",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1_2",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1_3",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1_4",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1_5",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1_6",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_1_7",["其它"]);
dsy.add("0_1_2",["跨市VPMN","跨市短號集群網(wǎng)","集團代付"]);
dsy.add("0_1_2_0",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_2_1",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_1_2_2",["業(yè)務(wù)辦理條件及流程","產(chǎn)品使用功能","資費計費介紹","系統(tǒng)操作指引","營銷方案"]);
dsy.add("0_2",["產(chǎn)品申請","其它"]);
dsy.add("0_2_0",["新建短號集群網(wǎng)","新建集團彩鈴","新建手機郵箱","新建移動總機","新建集團總機","新建Blackberry","新建IP專線","新建短信直連","新建企信通","其它"]);
dsy.add("0_2_1",["其它"]);
dsy.add("0_3",["上門（駐點）服務(wù)","電話服務(wù)","其它"]);
dsy.add("0_3_0",["客戶經(jīng)理","企信通開發(fā)商","移動總機開發(fā)商","移動名片開發(fā)商","Blackberry開發(fā)商","手機郵箱開發(fā)商","校訊通合作商","財信通合作商","物流通合作商","其它"]);
dsy.add("0_3_1",["客戶經(jīng)理","企信通開發(fā)商","移動總機開發(fā)商","移動名片開發(fā)商","Blackberry開發(fā)商","手機郵箱開發(fā)商","校訊通合作商","財信通合作商","物流通合作商","其它"]);
</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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

  • Javascript Worker子線程代碼實例

    Javascript Worker子線程代碼實例

    這篇文章主要介紹了Javascript Worker子線程代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-02-02
  • 分享10個常見的JavaScript前端手寫功能

    分享10個常見的JavaScript前端手寫功能

    這篇文章主要分享10個常見的前端手寫功能，防抖、節(jié)流、深拷貝、異步控制并發(fā)數(shù)、繼承等功能技巧，具有一定的參考價值，需要的小伙伴可以參考一下
    2022-02-02
  • js比較兩個單獨的數(shù)組或?qū)ο笫欠裣嗟鹊膶嵗a

    js比較兩個單獨的數(shù)組或?qū)ο笫欠裣嗟鹊膶嵗a

    本文通過實例代碼給大家介紹了js比較兩個單獨的數(shù)組或?qū)ο笫欠裣嗟?,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-04-04
  • 使用json對象轉(zhuǎn)化為key,value的對象數(shù)組

    使用json對象轉(zhuǎn)化為key,value的對象數(shù)組

    這篇文章主要介紹了使用json對象轉(zhuǎn)化為key，value的對象數(shù)組方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • JavaScript獲取ul中l(wèi)i個數(shù)的方法

    JavaScript獲取ul中l(wèi)i個數(shù)的方法

    這篇文章主要介紹了JavaScript獲取ul中l(wèi)i個數(shù)的方法,涉及javascript針對頁面HTML元素的獲取及屬性操作相關(guān)技巧,需要的朋友可以參考下
    2017-02-02
  • JavaScript中對循環(huán)語句的優(yōu)化技巧深入探討

    JavaScript中對循環(huán)語句的優(yōu)化技巧深入探討

    這篇文章主要介紹了JavaScript中對循環(huán)語句的優(yōu)化技巧深入探討,本文翻譯自一個臺灣朋友的文章,需要的朋友可以參考下
    2014-06-06
  • 原生JS實現(xiàn)煙花效果

    原生JS實現(xiàn)煙花效果

    這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • JavaScript接入百度地圖API的方法步驟

    JavaScript接入百度地圖API的方法步驟

    在網(wǎng)站開發(fā)過程中，經(jīng)常會調(diào)用到地圖，百度地圖JavaScript API可幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應(yīng)用，本文就詳細(xì)的介紹一下，感興趣的可以了解一下
    2021-07-07
  • JS模擬面向?qū)ο笕猓ǘ?、類型與賦值）

    JS模擬面向?qū)ο笕猓ǘ?、類型與賦值）

    上次，我講了有關(guān)類型區(qū)別和傳遞的問題，現(xiàn)在，我給大家在插上一點有關(guān)類型賦值的問題。
    2011-07-07
  • JavaScript編寫連連看小游戲

    JavaScript編寫連連看小游戲

    這篇文章主要介紹了JavaScript編寫連連看小游戲的相關(guān)資料,需要的朋友可以參考下
    2015-07-07

最新評論