طريقة تنفيذ القائمة المنسدلة متعددة المستويات في JavaScript

تصف هذه المقالة طريقة تنفيذ القوائم المنسدلة متعددة المستويات في JavaScript. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:

نسخة الكود كما يلي:

<script language = "javaScript">

<!- ​​ابدأ

var arritems1 = new array () ؛

var arritemsgrp1 = new array () ؛

arritems1 [3] = "العمود الثاني" ؛

arritemsgrp1 [3] = 1 ؛

arritems1 [4] = "العمود الثاني والثالث" ؛

arritemsgrp1 [4] = 1 ؛

arritems1 [5] = "العمود 24" ؛

arritemsgrp1 [5] = 1 ؛

arritems1 [6] = "العمود الثالث" ؛

arritemsgrp1 [6] = 2 ؛

arritems1 [7] = "عمود الثالوث" ؛

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 = new 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 x ؛

// تفريغ المربع الثاني المنسدلة من أي خيارات

لـ (var q = controlTopOpulate.Options.Length ؛ q> = 0 ؛

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>

<اسم النموذج = mychoices>

<table align = "center">

<tr>

<td>

<حدد ID = FirstChoice name = firstChoice onChange = "SelectChange (هذا ، mychoices.secondchoice ، arritems1 ، arritemsgrp1) ؛">>

<Option Value = "0"> اذكر واحد </option>

<Option Value = "1"> القائمة 2 </soph>

<Option Value = "2"> اذكر ثلاثة </Option>

<Option Value = "3"> اذكر أربعة </Option>

</select>

</td> <td>

<SELECT ID = SecondChoice name = SecondChoice OnChange = "SelectChange (هذا ، Mychoices.thirdchoice ، arritems2 ، arritemsgrp2) ؛">

</select>

<حدد ID = اسم ThirdChoice = ThirdChoice>

</select>

</td>

</r>

</table>

</form>

آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.