首頁 > 開發者 > 網站開發

Js 實現五級聯動

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：c   style   code   java   a   http   

js實現多級聯動的方法很多，這裡給出?種5級聯動的例子，其實可以擴充成N級聯動,在做項目的時候碰到了這樣?個問題但是有不能從資料庫中動態載入這些選項，所以只有想辦法從單個的頁面著手來處理了，應為項目的表單是動態產生的，所以需要每個流程的設計過程中需要有單獨的頁面來處理，這樣就決定了不能改變已有的商務邏輯來實現多級表單的聯動。
Code如下：
<html>
<head>
<title>級聯</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More