JS实现的五级联动菜单效果完整实例

互联网
一天，当你走过蔓草荒烟，我便在那里向你轻声呼喊，以风声，以水响。斩断自己的退路，才能更好地赢得出路。

本文实例讲述了JS实现的五级联动菜单效果。分享给大家供大家参考，具体如下：

js实现多级联动的方法很多，这里给出一种5级联动的例子，其实可以扩展成N级联动,在做项目的时候碰到了这样一个问题但是有不能从数据库中动态的加载这些选项，所以只有想办法从单个的页面着手来处理了，应为项目的表单是动态产生的，所以需要每个流程的设计过程中需要有单独的页面来处理，这样就决定了不能改变已有的业务逻辑来实现多级表单的联动。

运行效果图如下：

完整代码如下：

<html>
<head>
<title>级联</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>

希望本文所述对大家JavaScript程序设计有所帮助。

本文JS实现的五级联动菜单效果完整实例到此结束。新路开始常是狭窄的，但它却是自我延伸拓宽的序曲。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
zTree 树插件实现全国五级地区点击后加载的示例
JS获取鼠标点击时的位置
JS获取URL参数
Ajax跨域问题及解决方案（jsonp，cors）
ajax动态加载json数据并详细解析