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脚本学习 比较实用的基础
Sep 07 Javascript
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
three.js 如何制作魔方
Jul 31 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
javascript操作向表格中动态加载数据
Aug 27 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流量统计功能的实现代码
2012/09/29 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
名片管理系统python版
2018/01/11 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python3的socket使用方法详解
2020/02/18 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
几个SQL的面试题
2014/03/08 面试题
安全责任协议书
2014/04/21 职场文书
检讨书模板
2015/01/29 职场文书
《三国志》赏析
2019/08/27 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python