javascript实现多级联动下拉菜单的方法


Posted in Javascript onFebruary 06, 2015

本文实例讲述了javascript实现多级联动下拉菜单的方法。分享给大家供大家参考。具体实现方法如下:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var arrItems1 = new Array();

var arrItemsGrp1 = new Array();

arrItems1[3] = "列二";

arrItemsGrp1[3] = 1;

arrItems1[4] = "列二三";

arrItemsGrp1[4] = 1;

arrItems1[5] = "列二四";

arrItemsGrp1[5] = 1;

arrItems1[6] = "列三";

arrItemsGrp1[6] = 2;

arrItems1[7] = "列三一";

arrItemsGrp1[7] = 2;

arrItems1[0] = "列四";

arrItemsGrp1[0] = 3;

arrItems1[1] = "列四一";

arrItemsGrp1[1] = 3;

arrItems1[2] = "列四二";

arrItemsGrp1[2] = 3;

var arrItems2 = new Array();

var arrItemsGrp2 = new Array();

arrItems2[21] = "列4-0";

arrItemsGrp2[21] = 0

arrItems2[22] = "列4-1";

arrItemsGrp2[22] = 0

arrItems2[31] = "列41-0";

arrItemsGrp2[31] = 1

arrItems2[34] = "列41-1";

arrItemsGrp2[34] = 1

arrItems2[35] = "列42-0";

arrItemsGrp2[35] = 2

arrItems2[99] = "列24-2";

arrItemsGrp2[99] = 5

arrItems2[100] = "列24-1";

arrItemsGrp2[100] = 5

arrItems2[57] = "列24-0";

arrItemsGrp2[57] = 5

arrItems2[101] = "列2-0";

arrItemsGrp2[101] = 3

arrItems2[102] = "列2-1";

arrItemsGrp2[102] = 3

arrItems2[103] = "列23-0";

arrItemsGrp2[103] = 4

arrItems2[104] = "列23-1";

arrItemsGrp2[104] = 4

arrItems2[105] = "列3-0";

arrItemsGrp2[105] = 6

arrItems2[106] = "列3-1";

arrItemsGrp2[106] = 6

arrItems2[200] = "列31-0";

arrItemsGrp2[200] = 7

arrItems2[201] = "列31-1";

arrItemsGrp2[201] = 7

arrItems2[203] = "列31-2";

arrItemsGrp2[203] = 7

function selectChange(control, controlToPopulate, ItemArray, GroupArray)

{

  var myEle ;

  var x ;

  // Empty the second drop down box of any choices

  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;

  if (control.name == "firstChoice") {

    // Empty the third drop down box of any choices

    for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;

 }

  // ADD Default Choice - in case there are no values

  myEle = document.createElement_x("option") ;

  myEle.value = 0 ;

  myEle.text = "[列表]" ;

  controlToPopulate.add(myEle) ;

for ( x = 0 ; x < ItemArray.length  ; x++ )

    {

      if ( GroupArray[x] == control.value )

        {

          myEle = document.createElement_x("option") ;

          myEle.value = x ;

          myEle.text = ItemArray[x] ;

          controlToPopulate.add(myEle) ;

        }

    }

}

//  End -->

</script>

<form name=myChoices>

<table align="center">

<tr>

<td>

<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">

  <option value="0">列表一</option>

  <option value="1">列表二</option>

  <option value="2">列表三</option>

  <option value="3">列表四</option>

</SELECT>

</TD><TD>

<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">

</SELECT>

<SELECT id=thirdChoice name=thirdChoice>

</SELECT>

</TD>

</TR>

</TABLE>

</form>

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

Javascript 相关文章推荐
Egret引擎开发指南之视觉编程
Sep 03 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
js模糊查询实例分享
Dec 26 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
javascript强制点击广告的方法
Feb 06 #Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 #Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 #Javascript
触屏中的JavaScript事件分析
Feb 06 #Javascript
JavaScript事件委托技术实例分析
Feb 06 #Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 #Javascript
JavaScript 异常处理 详解
Feb 06 #Javascript
You might like
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
会计学习心得体会
2014/09/09 职场文书
生产操作工岗位职责
2014/09/16 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL
Redis唯一ID生成器的实现
2022/07/07 Redis