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 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
微信JS接口大全
Aug 25 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
vue如何截取字符串
May 06 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
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
php简单压缩css样式示例
2016/09/22 PHP
js操作数组函数实例小结
2015/12/10 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python开发之str.format()用法实例分析
2016/02/22 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
python 一维二维插值实例
2020/04/22 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
linux面试题参考答案(8)
2015/08/11 面试题
文员自我评价怎么写
2013/09/19 职场文书
校三好学生主要事迹
2014/01/11 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
残疾人小组计划书
2014/04/27 职场文书
初三学习计划书范文
2014/04/30 职场文书
学习经验演讲稿
2014/05/10 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
八年级物理教学反思
2016/02/19 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技