Méthode d'implémentation du menu déroulant de liaison à plusieurs niveaux en JavaScript

Cet article décrit la méthode d'implémentation des menus déroulants de liaison à plusieurs niveaux en JavaScript. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:

La copie de code est la suivante:

<Script linguisse = "javascript">

<! - commencer

var arritems1 = new Array ();

var arritemsgrp1 = new Array ();

Arritems1 [3] = "Colonne deux";

Arritemsgrp1 [3] = 1;

Arritems1 [4] = "colonne deux et trois";

Arritemsgrp1 [4] = 1;

Arritems1 [5] = "Colonne 24";

Arritemsgrp1 [5] = 1;

Arritems1 [6] = "Colonne trois";

Arritemsgrp1 [6] = 2;

Arritems1 [7] = "colonne Trinity";

Arritemsgrp1 [7] = 2;

Arritems1 [0] = "Colonne quatre";

Arritemsgrp1 [0] = 3;

Arritems1 [1] = "Colonne quatre One";

Arritemsgrp1 [1] = 3;

Arritems1 [2] = "Colonne 42";

Arritemsgrp1 [2] = 3;

var arritems2 = new Array ();

var arritemsgrp2 = new Array ();

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

Arritemsgrp2 [21] = 0

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

Arritemsgrp2 [22] = 0

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

Arritemsgrp2 [31] = 1

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

Arritemsgrp2 [34] = 1

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

Arritemsgrp2 [35] = 2

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

Arritemsgrp2 [99] = 5

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

Arritemsgrp2 [100] = 5

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

Arritemsgrp2 [57] = 5

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

Arritemsgrp2 [101] = 3

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

Arritemsgrp2 [102] = 3

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

Arritemsgrp2 [103] = 4

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

Arritemsgrp2 [104] = 4

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

Arritemsgrp2 [105] = 6

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

Arritemsgrp2 [106] = 6

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

Arritemsgrp2 [200] = 7

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

Arritemsgrp2 [201] = 7

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

Arritemsgrp2 [203] = 7

Fonction SelectChange (Control, ControlTopopuler, ItemArray, GroupArray)

{

var myele;

var x;

// vide la deuxième boîte déroulante de tous les choix

pour (var q = contrôletopopulate.options.length; q> = 0; q--) ControlTopopulate.options [q] = null;

if (Control.Name == "FirstCoice") {

// vide la troisième boîte déroulante de tous les choix

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

}

// Ajouter un choix par défaut - au cas où il n'y a pas de valeurs

myele = document.createelement_x ("option");

myele.value = 0;

myele.text = "[list]";

ControlTopopuler.add (Myele);

pour (x = 0; x <itemArray.length; x ++)

{

if (groupArray [x] == Control.Value)

{

myele = document.createelement_x ("option");

myele.value = x;

myele.text = itemArray [x];

ControlTopopuler.add (Myele);

}

}

}

// fin ->

</cript>

<nom de formulaire = myChoices>

<table align = "Center">

<tr>

<TD>

<Select id = firstCoice name = firstCoice onchange = "selectchange (this, myChoices.secondChoice, Arritems1, Arritemsgrp1);">

<Option Value = "0"> Liste un </ Option>

<Option Value = "1"> Liste 2 </ Option>

<Option Value = "2"> Liste trois </ Option>

<Option Value = "3"> Liste quatre </ Option>

</lect>

</td> <td>

<Select id = SecondCoice name = SecondCoice onchange = "selectchange (this, myChoices.thirdChoice, Arritems2, Arritemsgrp2);">

</lect>

<Select id = tiers nom = tiers>

</lect>

</td>

</tr>

</ Table>

</ form>

J'espère que cet article sera utile à la programmation JavaScript de tous.