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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
javascript实现留言板功能
2020/02/08 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
继电保护工岗位职责
2014/01/05 职场文书
三下乡活动方案
2014/01/31 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
高校教师岗位职责
2014/03/18 职场文书
作文批改评语大全
2014/04/23 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
如何在python中实现ECDSA你知道吗
2021/11/23 Python