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 实现五级联动的更多相关文章

  1. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  2. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  3. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生JS实现三级联动

    代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  5. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  6. JS 省市区三级联动

    JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. JS制作二级联动

    JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  8. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  9. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. Qt Creator无法用“UTF-8”编码解码

    在Qt Creator 里打开其他编辑器的代码时有时会提示: 无法用"UTF-8"编码解码     在文件上右键使用NotePad++编辑器打开:     选择->格式-&g ...

  2. 在jybot下跑Selenium2Library

    应用场景:项目组要将原有SeleniumLibrary写的脚本切换到Selenium2Library(后称S2L)下,但是原来有很多Java写的库,综合考虑认为还是在Jython下跑比较合适.但是安装 ...

  3. Unity3d:加载Format是RGB24位的图片失败（加载图片显示问号）

    问题描述:加载图片显示是个红色的问号,调试发现,Texture的Format=RGB24的都加载失败,ARGB32位的都能成功,按照常规,首先去度娘,看是否有人遇到和我同样的问题,结果一无所获.将用N ...

  4. Redis本地环境搭建

    Windows 下环境搭建 1. 设置hosts set duapphosts=127.0.0.1 sqld.duapp.com set redisduapphosts=127.0.0.1 redis ...

  5. （剑指Offer）面试题33：把数组排成最小的数

    题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路: 1.全 ...

  6. 转载：如何利用Vim进行Erlang开发

    转自:http://ovalpo.info/how_to_use_vim_for_erlang_dev/ 如何利用Vim进行Erlang开发 by Martin J. Logan on Septemb ...

  7. 以静态变量保存 Spring ApplicationContext

    package com.thinkgem.jeesite.common.utils; import java.net.HttpURLConnection; import java.net.URL; i ...

  8. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  9. C++程序员的javascript教程

    本文主要目的是向c++程序员阐述javascript的编程思想,以及编程中的误区.   变量声明: 1.变量声明的解析早于代码运行.JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变 ...

  10. flash builder 4.6使用profile（概要分析）调试性能

    最近用调试flex的性能,发现fb自带有性能调试工具profile,折腾好一段时间终于成功用上 环境:flash builder 4.6,myeclipse 10(fb装独立版,再以插件形式绑定到my ...