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. Objective-C 学习记录4

    字符串的一些方法使用: 1.创建字典的NSString可变字符串,和NSMutableString不可变字符串.都是objective的对象. char *str是字母数组. 2.字符串格式化:str ...

  2. Objc基础学习记录2

    1.[类 方法名]; //类方法,-静态成员函数, + (void)fun; 2.[对象名 方法名]; //实例方法, -非静态成员函数, - (void) fun; 3.带有冒号必须要有参数; 4. ...

  3. ASP.NET设置404页面返回302HTTP状态码的解决方法

    在配置文件中配置404页面如下: .代码如下: <customErrors mode="On" defaultRedirect="404.aspx"> ...

  4. nhibernate操作sql2008数据库（添加数据失败）

    今天遇到一错误困了我一天,如此痛恨,遂记录于此: nhibernate框架+MVC模式搭的项目,添加数据时报错: "could not insert: [KXRMallManage.Mode ...

  5. （剑指Offer）面试题19：二叉树的镜像

    题目: 操作给定的二叉树,将其变换为源二叉树的镜像. 二叉树的定义如下: struct TreeNode{ int val; TreeNode* left; TreeNode* right; }; 输 ...

  6. 【绝密外泄】风哥Oracle数据库DBA高级工程师培训视频教程与内部资料v0.1

    [绝密外泄]风哥Oracle数据库DBA高级工程师培训视频教程与内部资料v0.1 由于是[绝密外泄]资料,防止被查,需要的小伙伴赶紧下载附件中的课件文档.由于视频太大了,已放在百度网盘了,已经在附中说 ...

  7. 【转】深入浅出异步I/O模型

    转自:http://pengpeng.iteye.com/blog/868643 从上篇文章的介绍我们知道linux内核根据TCP/IP网络模型,给我们隐藏了传输层以下的网络传输细节,我们的网络应用程 ...

  8. FreeMarker中文API手冊(完整)

    FreeMarker概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用 ...

  9. RotateAnimation详解

    其他构造器的旋转也可参考这副图. RotateAnimation旋转坐标系为以旋转点为坐标系(0,0)点.x轴为0度,顺时针方向旋转一定的角度.        1.RotateAnimation(fr ...

  10. iOS开发——UI高级OC篇&自定义控件之调整按钮中子控件（图片和文字）的位置

    自定义控件之调整按钮中子控件(图片和文字)的位置 其实还有一种是在storyBoard中实现的,只需要设置对应空间的左右间距: 这里实现前面两种自定义的方式 一:imageRectForContent ...