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

https://www.jb51.net/article/106525.htm

本文实例讲述了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>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/400246.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【RK3399Pro学习笔记】十五、ROS中launch启动文件的使用方法

【RK3399Pro学习笔记】十五、ROS中launch启动文件的使用方法

目录Launch文件语法<launch><launch><launch><node><node><node>参数设置<param>/<rosparam><param>/<rosparam><param>/<rosparam><arg><arg><arg><remap><remap><…
阅读更多...
关于有多少个1的计算

关于有多少个1的计算

1、题目 输入一个十进制的数&#xff0c;输出 &#xff08;1&#xff09;、给定n&#xff0c;求出从1到n的所有整数中1的个数。&#xff08;暂用用f(n)表示&#xff09; &#xff08;2&#xff09;、求满足nf(n)的最小整数&#xff08;1除外&#xff09;。 #include <ios…
阅读更多...
ABP+AdminLTE+Bootstrap Table权限管理系统第八节--ABP错误机制及AbpSession相关

ABP+AdminLTE+Bootstrap Table权限管理系统第八节--ABP错误机制及AbpSession相关

返回总目录:ABPAdminLTEBootstrap Table权限管理系统一期 上一节我们讲到登录逻辑,我做的登录逻辑很简单的,我们来看一下abp module-zero里面的登录代码. #region Login / Logoutpublic ActionResult Login(string returnUrl ""){if (string.IsNullOrWhiteSpace(ret…
阅读更多...
P2327 [SCOI2005]扫雷

P2327 [SCOI2005]扫雷

题目描述 输入输出格式 输入格式&#xff1a; 第一行为N&#xff0c;第二行有N个数&#xff0c;依次为第二列的格子中的数。&#xff08;1< N < 10000&#xff09; 输出格式&#xff1a; 一个数&#xff0c;即第一列中雷的摆放方案数。 输入输出样例 输入样例#1&#xff…
阅读更多...
天津海运[600751]股票

天津海运[600751]股票

2019独角兽企业重金招聘Python工程师标准>>> 天津海运[600751]股票 转载于:https://my.oschina.net/chworld/blog/425583
阅读更多...
【RK3399Pro学习笔记】十六、ROS中的常用可视化工具

【RK3399Pro学习笔记】十六、ROS中的常用可视化工具

目录测试rqt_consolerqt_graphrqt_plotrqt_image_viewrqtrvizgazebo平台&#xff1a;华硕 Thinker Edge R 瑞芯微 RK3399Pro 固件版本&#xff1a;Tinker_Edge_R-Debian-Stretch-V1.0.4-20200615 记录自【古月居】古月ROS入门21讲 | 一学就会的ROS机器人入门教程 —— 古月居G…
阅读更多...
Cocos2d-x 3.2：通过ClippingNode实现一个功能完善的跑马灯公告（1）

Cocos2d-x 3.2：通过ClippingNode实现一个功能完善的跑马灯公告（1）

Cocos2d-x 3.2&#xff1a;通过ClippingNode实现一个功能完善的跑马灯公告&#xff08;1&#xff09; 本文转载至深入理解Cocos2d-x 3.x&#xff1a;一步一步通过ClippingNode实现一个功能完善的跑马灯公告&#xff08;1&#xff09; 这篇文章主要是通过一步一步实现一个功能完…
阅读更多...
【STC15库函数上手笔记】1、建立工程

【STC15库函数上手笔记】1、建立工程

目录新建工程添加文件到工程中main.c时钟STC实验箱4 IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 在STC官网发现了库函数&#xff0c;大受震撼&#xff1a; 宏晶科技官方网站 直接搜“库函数”&#xff0c;目前仅有STC15和STC8系列有库函…
阅读更多...
hdu 6086 Rikka with String(AC自动机+状压dp)

hdu 6086 Rikka with String(AC自动机+状压dp)

题目链接&#xff1a;hdu 6086 Rikka with String 题意&#xff1a; 给你n个只含01的串&#xff0c;和一个长度L,现在让你构造出满足s[i]≠s[|s|−i1] for all i∈[1,|s|] &#xff0c;长度为2L&#xff0c;并且包含给出的n个串&#xff0c;问能有多少种这样的串。 题解&#x…
阅读更多...
【STC15库函数上手笔记】2、GPIO

【STC15库函数上手笔记】2、GPIO

目录硬知识IO口初始化函数测试main.c实验现象STC实验箱4 IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 摘自《STC库函数使用参考》 IO口初始化函数 GPIO_Inilize GPIO_InitTypeDef的定义见于文件"GPIO.H"。 typede…
阅读更多...
Json-转自菜鸟教程

Json-转自菜鸟教程

1. python中为什么用json有什么作用&#xff1f;&#xff1f;不是python用json&#xff0c;json是类似xml的一种通用格式&#xff0c;在很多地方都可以用。json相比xml&#xff0c;数据量更小&#xff0c;而且可以很方便的和解释型语言的结构相互转换。 2. 常用的两种Json函数&…
阅读更多...
centos下编译安装curl拓展

centos下编译安装curl拓展

---恢复内容开始--- 新的php环境没有curl拓展&#xff0c;现在用编译方式增加拓展。 一、安装curl 当前curl最新版本为7.32&#xff0c;下载地址为http://curl.haxx.se/download/curl-7.32.0.tar.gz 使用wget方式下载到相关目录 wget http://curl.haxx.se/download/curl-7.32.0…
阅读更多...
【STC15库函数上手笔记】3、外部中断

【STC15库函数上手笔记】3、外部中断

目录硬知识外中断初始化函数测试main.cExti.cSTC实验箱4 IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 摘自《STC库函数使用参考》 外中断初始化函数 Ext_Inilize EXTI_InitTypeDef的定义见于文件"Exti.H"。 typed…
阅读更多...
Mac pycharm flask 用内网ip 运行 web

Mac pycharm flask 用内网ip 运行 web

1. 菜单 run -> run 2. 选择&#xff0c;你要运行的 py 程序 3. 设置 Additional options: 为 --host0.0.0.0 &#xff0c;把 FLASK_DEBUG 的勾&#xff0c;去掉&#xff0c;如下图 4. 在 py 程序中 &#xff08;运行的主程序&#xff09;&#xff0c; 修改以下代码 …
阅读更多...
【STC15库函数上手笔记】4、USART串口

【STC15库函数上手笔记】4、USART串口

目录硬知识串口初始化函数串口1写缓冲函数串口2写缓冲函数串口1写数据块函数串口2写数据块函数模拟串口字节发送函数模拟串口写数据块函数测试硬件串口模拟串口soft_uart.csoft_uart.hmain.cSTC实验箱4 IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Versio…
阅读更多...
CSS--使用伪选择器制作箭头图标

CSS--使用伪选择器制作箭头图标

// 使用Transform的属性&#xff0c;组合translate&#xff08;位移&#xff09;和rotate&#xff08;旋转&#xff09;&#xff0c;将生成的小矩形组合成各种箭头样式&#xff1b; HTML 1 <section class"main">2 <header class"title">图…
阅读更多...
Linux多命令协作：管道及重定向

Linux多命令协作：管道及重定向

认识Linux中管道和重定向 如下图。 实践&#xff1a;重定向>的使用 转载于:https://www.cnblogs.com/mcgrady/p/7339770.html
阅读更多...
【STC15库函数上手笔记】5、定时器

【STC15库函数上手笔记】5、定时器

目录硬知识定时器初始化函数测试基本功能测试main.c中断服务函数实验现象模拟PWM信号main.c实验现象STC实验箱4 IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 摘自《STC库函数使用参考》 定时器初始化函数 Timer_Inilize TIM_…
阅读更多...
Linux内存卡（SD卡、TF卡）作为Swap交换空间

Linux内存卡（SD卡、TF卡）作为Swap交换空间

目录平台&#xff1a;华硕 Thinker Edge R 瑞芯微 RK3399Pro 固件版本&#xff1a;Tinker_Edge_R-Debian-Stretch-V1.0.4-20200615 编译ORB-SLAM3时内存不足报错&#xff0c;专门买来一个32G的内存卡&#xff0c;设成swap试试。 插上内存卡&#xff0c;使用如下命令查看&#…
阅读更多...
mysqldumper

mysqldumper

介绍MySQL自身的mysqldump工具支持单线程工作&#xff0c;依次一个个导出多个表&#xff0c;没有一个并行的机&#xff0c;这就使得它无法迅速的备份数据。mydumper作为一个实用工具&#xff0c;能够良好支持多线程工作&#xff0c;可以并行的多线程的从表中读入数据并同时写到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023