Method of implementing multi-level linkage drop-down menu in javascript

This article describes the method of implementing multi-level linkage drop-down menus in JavaScript. Share it for your reference. The specific implementation method is as follows:

The code copy is as follows:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var arrItems1 = new Array();

var arrItemsGrp1 = new Array();

arrItems1[3] = "Column Two";

arrItemsGrp1[3] = 1;

arrItems1[4] = "Column two and three";

arrItemsGrp1[4] = 1;

arrItems1[5] = "Column 24";

arrItemsGrp1[5] = 1;

arrItems1[6] = "Column Three";

arrItemsGrp1[6] = 2;

arrItems1[7] = "Column Trinity";

arrItemsGrp1[7] = 2;

arrItems1[0] = "Column Four";

arrItemsGrp1[0] = 3;

arrItems1[1] = "Column Four One";

arrItemsGrp1[1] = 3;

arrItems1[2] = "Column 42";

arrItemsGrp1[2] = 3;

var arrItems2 = new Array();

var arrItemsGrp2 = new Array();

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

arrItemsGrp2[21] = 0

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

arrItemsGrp2[22] = 0

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

arrItemsGrp2[31] = 1

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

arrItemsGrp2[34] = 1

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

arrItemsGrp2[35] = 2

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

arrItemsGrp2[99] = 5

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

arrItemsGrp2[100] = 5

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

arrItemsGrp2[57] = 5

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

arrItemsGrp2[101] = 3

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

arrItemsGrp2[102] = 3

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

arrItemsGrp2[103] = 4

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

arrItemsGrp2[104] = 4

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

arrItemsGrp2[105] = 6

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

arrItemsGrp2[106] = 6

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

arrItemsGrp2[200] = 7

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

arrItemsGrp2[201] = 7

arrItems2[203] = "Column 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 = "[list]" ;

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">List one</option>

<option value="1">List 2</option>

<option value="2">List Three</option>

<option value="3">List Four</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>

I hope this article will be helpful to everyone's JavaScript programming.