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

所属分类: 网络编程 / JavaScript 阅读数: 309
收藏 0 赞 0 分享

本文实例讲述了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程序设计有所帮助。

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多