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>

js 實現二級聯動
2019-02-13
JS
原生JS實現二級聯動
2018-09-24
JS
JS實現級聯下拉選單
2009-03-15
JS
js二級聯動
2019-01-16
JS
js例子-二級聯動
2017-05-22
JS
實現基於json的級聯選單
2008-01-03
JSON
用Vue實現省市區三級聯動
2017-12-14
Vue
幾行程式碼實現ListView的多級聯動——多級聯動就是如此簡單
2017-08-28
行程View
jq+php+mysql 實現二級選單聯動
2019-02-16
PHPMySql
小程式：動態資料實現三級聯動選擇器
2018-03-09
C# MVC LayUI實現下拉框二級聯動
2020-06-25
C#MVCUI
實現外賣選餐時兩級 tableView 聯動效果
2016-12-13
View
jquery 實現層級下拉框聯動效果程式碼
2013-11-27
jQuery
jquery實現四級級聯下拉選單
2020-12-10
jQuery
php中用ajax實現二級省市級聯
2017-11-22
PHP
knockout.js 省、市、區三級聯動
2018-07-27
JS
js實現的國家、省、市級聯效果程式碼例項
2017-03-24
JS
基於vue2實現多級聯動選擇器
2017-06-09
Vue
如何實現引數級聯查詢
2019-12-04
用Vue、element-ui、axios實現省市區三級聯動
2019-01-07
VueUIiOS
Java實現資料庫和資料表的二級聯動
2015-12-15
Java資料庫
Vue實現左右選單聯動實現（更新）
2018-08-11
Vue
Java版通用JS級聯
2008-04-23
JavaJS
node.js利用socket.io實現多人線上匹配聯機五子棋
2018-05-31
Node.js
JS實現動物相簿
2020-12-08
JS
vueusejs實現拖動
2024-03-14
VueJS
MyBatis初級實戰之五：一對一關聯查詢
2021-01-21
MyBatis
五、jsPlumb實現流程圖配置--連線
2024-03-19
JS流程圖
Laravel-admin 三級聯動 or 多級聯動編輯 and 新建
2020-07-16
Laravel
jQuery實現省市區三級聯動完整版原始碼演示下載
2016-12-23
jQuery原始碼
jQuery結合PHP+MySQL實現二級聯動下拉選單[例項]
2017-12-10
jQueryPHPMySql
extjs Combobox級聯
2012-04-23
JS
用vue實現部落格列表的級聯效果
2018-04-18
Vue
android 之 Spinner 下拉選單實現級聯
2014-03-31
Android
JS實現拖動div層移動
2014-04-26
JS
js實現的數字四捨五入效果
2017-03-17
JS
JS省市區聯動
2014-09-27
JS
RxJS的另外四種實現方式（五）——使用生成器實現
2018-09-20
JS

Js 實現五級聯動

相關文章