发布于 2016-11-13 00:08:50 | 130 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

---

这篇文章主要介绍了javascript实现多级联动下拉菜单的方法,通过javascript自定义函数实现对多级联动下拉菜单的操作,是非常实用的技巧,需要的朋友可以参考下

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