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.