首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 23, 2017

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

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

运行效果图如下：

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

完整代码如下：

<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相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

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

- Author -

蓝之风

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript this指针
Jul 30 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
基于 flexible 的 Vue 组件：Toast -- 显示框效果
Dec 26 Javascript
使用vue制作滑动标签
Sep 21 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
jquery实现焦点轮播效果
Feb 23 #Javascript
SVG描边动画
Feb 23 #Javascript
Angular JS 生成动态二维码的方法
Feb 23 #Javascript
js实现楼层导航功能
Feb 23 #Javascript
jQuery点击头像上传并预览图片
Feb 23 #Javascript
jQuery事件与动画基础详解
Feb 23 #Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 #Javascript
capture(1) SpringBoot(22) Flutter(2) uniapp(4) MybatisPlus(2) tabBar(1) element-china-area-data(1) self(1) Normal From(1) Navigator(1)
You might like
PHP define函数的使用说明
2008/08/27 PHP
PHP操作文件类的函数代码（文件和文件夹创建，复制，移动和删除）
2011/11/10 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
美国亚马逊旗下男装网站：East Dane（支持中文）
2019/09/25 全球购物
英国家具、照明、家居用品网上商店：Wayfair.co.uk
2020/02/13 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
励志演讲稿200字
2014/08/21 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
银行求职信怎么写
2019/06/20 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis