JS简单实现多级Select联动菜单效果代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下:

JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上。

运行效果截图如下:

JS简单实现多级Select联动菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<script language="javascript" >
/* 
** ====================================
** 类名:CLASS_LIANDONG_YAO 
** 功能:多级连动菜单 
** 作者:YAODAYIZI 
**/  
 function CLASS_LIANDONG_YAO(array)
 {
 //数组,联动的数据源
  this.array=array; 
  this.indexName='';
  this.obj='';
  //设置子SELECT
 // 参数:当前onchange的SELECT ID,要设置的SELECT ID
 this.subSelectChange=function(selectName1,selectName2)
  {
  //try
  //{
 var obj1=document.all[selectName1];
 var obj2=document.all[selectName2];
 var objName=this.toString();
 var me=this;
 obj1.onchange=function()
 {
  me.optionChange(this.options[this.selectedIndex].value,obj2.id)
 }
  }
  //设置第一个SELECT
 // 参数:indexName指选中项,selectName指select的ID
  this.firstSelectChange=function(indexName,selectName) 
  {
  this.obj=document.all[selectName];
  this.indexName=indexName;
  this.optionChange(this.indexName,this.obj.id)
  }
 // indexName指选中项,selectName指select的ID
  this.optionChange=function (indexName,selectName)
  {
 var obj1=document.all[selectName];
 var me=this;
 obj1.length=0;
 obj1.options[0]=new Option("请选择",'');
 for(var i=0;i<this.array.length;i++)
 { 
  if(this.array[i][1]==indexName)
  {
  //alert(this.array[i][1]+" "+indexName);
 obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
  }
 }
  } 
 }
 </script>
</head>
<body>
<form name="form1" method="post">
   
  <SELECT ID="s1" NAME="s1" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="s2" NAME="s2" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="s3" NAME="s3">
 <OPTION selected></OPTION>
  </SELECT>
  <br>
  <br><br>
  <SELECT ID="x1" NAME="x1" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x2" NAME="x2" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x3" NAME="x3">
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x4" NAME="x4">
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x5" NAME="x5">
 <OPTION selected></OPTION>
  </SELECT>
 </form>
 </body>
<script language="javascript">
//例子1-------------------------------------------------------------
//数据源
var array=new Array();
 array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID,父级ID,名称
 array[1]=new Array("华北地区","根目录","华北地区");
 array[2]=new Array("上海","华南地区","上海");
 array[3]=new Array("广东","华南地区","广东");
 array[4]=new Array("徐家汇","上海","徐家汇");
 array[5]=new Array("普托","上海","普托"); 
 array[6]=new Array("广州","广东","广州");
 array[7]=new Array("湛江","广东","湛江");
 //--------------------------------------------
 //这是调用代码
 var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
 liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
 liandong.subSelectChange("s1","s2"); //设置子级选择框
 liandong.subSelectChange("s2","s3");
 //例子2-------------------------------------------------------------
 //数据源 
 var array2=new Array();//数据格式 ID,父级ID,名称
 array2[0]=new Array("测试测试","根目录","测试测试"); 
 array2[1]=new Array("华北地区","根目录","华北地区");
 array2[2]=new Array("上海","测试测试","上海");
 array2[3]=new Array("广东","测试测试","广东");
 array2[4]=new Array("徐家汇","上海","徐家汇");
 array2[5]=new Array("普托","上海","普托"); 
 array2[6]=new Array("广州","广东","广州");
 array2[7]=new Array("湛江","广东","湛江");
 array2[8]=new Array("不知道","湛江","不知道");
 array2[9]=new Array("5555","湛江","555");
 array2[10]=new Array("++++","不知道","++++");
 array2[11]=new Array("111","徐家汇","111");
 array2[12]=new Array("222","111","222");
 array2[13]=new Array("333","222","333");
 //--------------------------------------------
 //这是调用代码
 //设置数据源
 var liandong2=new CLASS_LIANDONG_YAO(array2);
 //设置第一个选择框
 liandong2.firstSelectChange("根目录","x1");
 //设置子选择框
 liandong2.subSelectChange("x1","x2")
 liandong2.subSelectChange("x2","x3")
 liandong2.subSelectChange("x3","x4")
 liandong2.subSelectChange("x4","x5")
</script>
</html>

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

Javascript 相关文章推荐
javascript实现动态改变层大小的方法
May 14 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
轮播的简单实现方法
Jul 28 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
RequireJS用法简单示例
Aug 20 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 #Javascript
简单谈谈javascript Date类型
Sep 06 #Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 #Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 #Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 #Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 #Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 #Javascript
You might like
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
pygame实现简易飞机大战
2018/09/11 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
致共产党员倡议书
2014/04/16 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
经营场所使用证明
2015/06/19 职场文书
会议营销主持词
2015/07/03 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript