Método de implementação do menu suspenso de ligação multinível em javascript

Este artigo descreve o método de implementação de menus suspensos de ligação em vários níveis em JavaScript. Compartilhe para sua referência. O método de implementação específico é o seguinte:

A cópia do código é a seguinte:

<Script Language = "JavaScript">

<!- ​​Comece

var Arrritems1 = new Array ();

var Arritemsgrp1 = new Array ();

Arritems1 [3] = "Coluna dois";

Arritemsgrp1 [3] = 1;

Arritems1 [4] = "Coluna dois e três";

Arritemsgrp1 [4] = 1;

Arritems1 [5] = "Coluna 24";

Arritemsgrp1 [5] = 1;

Arritems1 [6] = "Coluna Três";

Arritemsgrp1 [6] = 2;

Arritems1 [7] = "Trindade da coluna";

Arritemsgrp1 [7] = 2;

Arritems1 [0] = "Coluna quatro";

Arritemsgrp1 [0] = 3;

Arritems1 [1] = "Coluna quatro";

Arritemsgrp1 [1] = 3;

Arritems1 [2] = "Coluna 42";

Arritemsgrp1 [2] = 3;

var ArriteMs2 = new Array ();

varrritemsgrp2 = new Array ();

Arritems2 [21] = "Coluna 4-0";

Arritemsgrp2 [21] = 0

Arritems2 [22] = "Coluna 4-1";

Arritemsgrp2 [22] = 0

Arritems2 [31] = "Coluna 41-0";

Arritemsgrp2 [31] = 1

Arritems2 [34] = "Coluna 41-1";

Arritemsgrp2 [34] = 1

Arritems2 [35] = "Coluna 42-0";

Arritemsgrp2 [35] = 2

Arritems2 [99] = "Coluna 24-2";

Arritemsgrp2 [99] = 5

Arritems2 [100] = "Coluna 24-1";

Arritemsgrp2 [100] = 5

Arritems2 [57] = "Coluna 24-0";

Arritemsgrp2 [57] = 5

Arritems2 [101] = "Coluna 2-0";

Arritemsgrp2 [101] = 3

Arritems2 [102] = "Coluna 2-1";

Arritemsgrp2 [102] = 3

Arritems2 [103] = "Coluna 23-0";

Arritemsgrp2 [103] = 4

Arritems2 [104] = "Coluna 23-1";

Arritemsgrp2 [104] = 4

Arritems2 [105] = "Coluna 3-0";

Arritemsgrp2 [105] = 6

Arritems2 [106] = "Coluna 3-1";

Arritemsgrp2 [106] = 6

Arritems2 [200] = "Coluna 31-0";

Arritemsgrp2 [200] = 7

Arritems2 [201] = "Coluna 31-1";

Arritemsgrp2 [201] = 7

Arritems2 [203] = "Coluna 31-2";

Arritemsgrp2 [203] = 7

Função SelectChange (Control, ControlTopulate, ItemArray, GroupArray)

{

var myele;

var x;

// esvazia a segunda caixa suspensa de qualquer opção

for (var q = controltopopulate.options.length; q> = 0; q--) controltopulate.options [q] = null;

if (control.name == "FirstChoice") {

// esvazia a terceira caixa suspensa de qualquer opção

for (var q = mychoices.thirdChoice.options.length; q> = 0; q--) myChoices.thirdChoice.options [q] = null;

}

// Adicionar escolha padrão - Caso não haja valores

myele = document.createElement_x ("option");

myele.value = 0;

myele.text = "[list]";

controltopopulate.add (myele);

para (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);

}

}

}

// final ->

</script>

<nome de forma = mychoices>

<tabela align = "Center">

<tr>

<Td>

<SELECT ID = FirstChoice Name = FirstChoice OnChange = "SelectChange (this, MyChoices.SecondChoice, Arritems1, Arritemsgrp1);">

<opção value = "0"> Lista um </pption>

<opção value = "1"> Lista 2 </pption>

<opção value = "2"> Lista três </pption>

<opção value = "3"> Lista quatro </pption>

</leclect>

</td> <td>

<SELECT ID = SecondChoice Name = SecondChoice OnChange = "SelectChange (this, MyChoices.thirdChoice, Arritems2, Arritemsgrp2);">

</leclect>

<SELECT ID = Nome do TerceiroChoice = TerceiroChoice>

</leclect>

</td>

</tr>

</Tabela>

</morm>

Espero que este artigo seja útil para a programação JavaScript de todos.