Js 實現五級聯動

weixin_34219944發表於2008-07-02

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> 

相關文章