วิธีการใช้เมนูแบบเลื่อนลงหลายระดับการเชื่อมโยงใน JavaScript

บทความนี้อธิบายวิธีการใช้เมนูแบบดรอปดาวน์หลายระดับการเชื่อมโยงใน JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:

การคัดลอกรหัสมีดังนี้:

<ภาษาสคริปต์ = "JavaScript">

<!- ​​เริ่มต้น

var arritems1 = new Array ();

var arritemsgrp1 = array ใหม่ ();

arritems1 [3] = "คอลัมน์สอง";

arritemsgrp1 [3] = 1;

arritems1 [4] = "คอลัมน์สองและสาม";

arritemsgrp1 [4] = 1;

arritems1 [5] = "คอลัมน์ 24";

arritemsgrp1 [5] = 1;

arritems1 [6] = "คอลัมน์สาม";

arritemsgrp1 [6] = 2;

arritems1 [7] = "คอลัมน์ Trinity";

arritemsgrp1 [7] = 2;

arritems1 [0] = "คอลัมน์สี่";

arritemsgrp1 [0] = 3;

arritems1 [1] = "คอลัมน์สี่อัน";

arritemsgrp1 [1] = 3;

arritems1 [2] = "คอลัมน์ 42";

arritemsgrp1 [2] = 3;

var arritems2 = new Array ();

var arritemsgrp2 = array ใหม่ ();

arritems2 [21] = "คอลัมน์ 4-0";

arritemsgrp2 [21] = 0

arritems2 [22] = "คอลัมน์ 4-1";

arritemsgrp2 [22] = 0

arritems2 [31] = "คอลัมน์ 41-0";

arritemsgrp2 [31] = 1

arritems2 [34] = "คอลัมน์ 41-1";

arritemsgrp2 [34] = 1

arritems2 [35] = "คอลัมน์ 42-0";

arritemsgrp2 [35] = 2

arritems2 [99] = "คอลัมน์ 24-2";

arritemsgrp2 [99] = 5

arritems2 [100] = "คอลัมน์ 24-1";

arritemsgrp2 [100] = 5

arritems2 [57] = "คอลัมน์ 24-0";

arritemsgrp2 [57] = 5

arritems2 [101] = "คอลัมน์ 2-0";

arritemsgrp2 [101] = 3

arritems2 [102] = "คอลัมน์ 2-1";

arritemsgrp2 [102] = 3

arritems2 [103] = "คอลัมน์ 23-0";

arritemsgrp2 [103] = 4

arritems2 [104] = "คอลัมน์ 23-1";

arritemsgrp2 [104] = 4

arritems2 [105] = "คอลัมน์ 3-0";

arritemsgrp2 [105] = 6

arritems2 [106] = "คอลัมน์ 3-1";

arritemsgrp2 [106] = 6

arritems2 [200] = "คอลัมน์ 31-0";

arritemsgrp2 [200] = 7

arritems2 [201] = "คอลัมน์ 31-1";

arritemsgrp2 [201] = 7

arritems2 [203] = "คอลัมน์ 31-2";

arritemsgrp2 [203] = 7

ฟังก์ชั่น SelectChange (ควบคุม, Controltopopulate, itemArray, GroupArray)

-

var myele;

var x;

// ล้างกล่องแบบเลื่อนลงครั้งที่สองของตัวเลือกใด ๆ

สำหรับ (var q = controltopopulate.options.length; q> = 0; q--) controltopopulate.options [q] = null;

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

// ล้างกล่องแบบเลื่อนลงครั้งที่สามของตัวเลือกใด ๆ

สำหรับ (var q = mychoices.thirdChoice.options.length; q> = 0; q--) mychoices.thirdchoice.options [q] = null;

-

// เพิ่มตัวเลือกเริ่มต้น - ในกรณีที่ไม่มีค่า

myele = document.createElement_x ("ตัวเลือก");

myele.value = 0;

myele.text = "[list]";

Controltopopulate.add (Myele);

สำหรับ (x = 0; x <itemarray.length; x ++)

-

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

-

myele = document.createElement_x ("ตัวเลือก");

myele.value = x;

myele.text = itemArray [x];

Controltopopulate.add (Myele);

-

-

-

// end ->

</script>

<form name = myChoices>

<table allign = "center">

<tr>

<td>

<select id = firstChoice name = FirstChoice OnChange = "SelectChange (นี่, myChoices.secondChoice, arritems1, arritemsgrp1);">

<ตัวเลือกค่า = "0"> แสดงรายการหนึ่ง </potion>

<ตัวเลือกค่า = "1"> รายการ 2 </potion>

<ตัวเลือกค่า = "2"> รายการสาม </potion>

<ตัวเลือกค่า = "3"> รายการสี่ </potion>

</เลือก>

</td> <td>

<select id = secondChoice name = secondChoice onChange = "SelectChange (นี่, myChoices.thirdChoice, arritems2, arritemsgrp2);">

</เลือก>

<Select id = thivebhoice name = ThirdChoice>

</เลือก>

</td>

</tr>

</table>

</form>

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน