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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
JsChart组件使用详解
2018/03/04 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
Python3处理HTTP请求的实例
2018/05/10 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python with标签使用方法解析
2020/01/17 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
理货员的岗位职责
2013/11/23 职场文书
请假条怎么写
2014/04/10 职场文书
连带责任保证书
2014/04/29 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL