Metode menerapkan menu drop-down tautan multi-level di JavaScript

Artikel ini menjelaskan metode menerapkan menu drop-down multi-level dalam JavaScript. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:

Salinan kode adalah sebagai berikut:

<Bahasa skrip = "javascript">

<!- ​​Mulailah

var arritems1 = array baru ();

var arritemsgrp1 = array baru ();

arritems1 [3] = "kolom dua";

arritemsgrp1 [3] = 1;

arritems1 [4] = "kolom dua dan tiga";

arritemsgrp1 [4] = 1;

arritems1 [5] = "kolom 24";

arritemsgrp1 [5] = 1;

arritems1 [6] = "kolom tiga";

arritemsgrp1 [6] = 2;

arritems1 [7] = "kolom trinitas";

arritemsgrp1 [7] = 2;

arritems1 [0] = "kolom empat";

arritemsgrp1 [0] = 3;

arritems1 [1] = "kolom empat satu";

arritemsgrp1 [1] = 3;

arritems1 [2] = "kolom 42";

arritemsgrp1 [2] = 3;

var arritems2 = array baru ();

var arritemsgrp2 = array baru ();

arritems2 [21] = "Kolom 4-0";

arritemsgrp2 [21] = 0

arritems2 [22] = "kolom 4-1";

arritemsgrp2 [22] = 0

arritems2 [31] = "Kolom 41-0";

arritemsgrp2 [31] = 1

arritems2 [34] = "kolom 41-1";

arritemsgrp2 [34] = 1

arritems2 [35] = "Kolom 42-0";

arritemsgrp2 [35] = 2

arritems2 [99] = "kolom 24-2";

arritemsgrp2 [99] = 5

arritems2 [100] = "kolom 24-1";

arritemsgrp2 [100] = 5

arritems2 [57] = "Kolom 24-0";

arritemsgrp2 [57] = 5

arritems2 [101] = "Kolom 2-0";

arritemsgrp2 [101] = 3

arritems2 [102] = "kolom 2-1";

arritemsgrp2 [102] = 3

arritems2 [103] = "Kolom 23-0";

arritemsgrp2 [103] = 4

arritems2 [104] = "Kolom 23-1";

arritemsgrp2 [104] = 4

arritems2 [105] = "Kolom 3-0";

arritemsgrp2 [105] = 6

arritems2 [106] = "Kolom 3-1";

arritemsgrp2 [106] = 6

arritems2 [200] = "Kolom 31-0";

arritemsgrp2 [200] = 7

arritems2 [201] = "kolom 31-1";

arritemsgrp2 [201] = 7

arritems2 [203] = "kolom 31-2";

arritemsgrp2 [203] = 7

Fungsi SelectChange (Control, ControlTopopulate, ItemArray, GroupArray)

{

var myele;

var x;

// Kosongkan kotak drop down kedua dari setiap pilihan

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

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

// Kosongkan kotak drop down ketiga dari pilihan apa pun

untuk (var q = mychoices.thirtchoice.options.length; q> = 0; q--) mychoices.thirtchoice.options [q] = null;

}

// Tambahkan pilihan default - jika tidak ada nilai

myele = document.createelement_x ("opsi");

myele.value = 0;

myele.text = "[list]";

controltopopulate.add (myele);

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

{

if (groupArray [x] == control.value)

{

myele = document.createelement_x ("opsi");

myele.value = x;

myele.text = itemArray [x];

controltopopulate.add (myele);

}

}

}

// end ->

</script>

<Form name = mychoices>

<tabel align = "center">

<tr>

<td>

<Pilih ID = Nama FirstChoice = FirstChoice Onchange = "SelectChange (ini, mychoices.secondChoice, arritems1, arritemsgrp1);">

<Option value = "0"> Daftar satu </pection>

<Option value = "1"> Daftar 2 </pection>

<Option value = "2"> Daftar tiga </pection>

<Option value = "3"> Daftar empat </tiption>

</Pilih>

</td> <td>

<Pilih ID = Nama SecondChoice = SecondChoice Onchange = "SelectChange (Ini, MyChoices.TheRdChoice, Arritems2, ArritemsGrp2);">

</Pilih>

<Pilih ID = Nama ChhireChoice = ThirdChoice>

</Pilih>

</td>

</tr>

</boable>

</form>

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.