JavaScriptにマルチレベルリンケージドロップダウンメニューを実装する方法

この記事では、JavaScriptにマルチレベルのリンケージドロップダウンメニューを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。

コードコピーは次のとおりです。

<スクリプト言語= "javascript">

<！ - begin

var arritems1 = new Array（）;

var arritemsgrp1 = new Array（）;

Arritems1 [3] = "列2";

Arritemsgrp1 [3] = 1;

Arritems1 [4] = "列2および3";

Arritemsgrp1 [4] = 1;

Arritems1 [5] = "列24";

Arritemsgrp1 [5] = 1;

Arritems1 [6] = "列3";

Arritemsgrp1 [6] = 2;

Arritems1 [7] = "column Trinity";

Arritemsgrp1 [7] = 2;

Arritems1 [0] = "列4";

Arritemsgrp1 [0] = 3;

Arritems1 [1] = "列4 One";

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（Control、ControlTopopulate、ItemArray、GroupArray）

{

var Myele;

var x;

//選択肢の2番目のドロップダウンボックスを空にします

for（var q = controltopopulate.options.length; q> = 0; q--）controltopopule.options [q] = null;

if（control.name == "FirstChoice"）{

//選択肢の3番目のドロップダウンボックスを空にします

for（var q = mychoices.thirdchoice.options.length; q> = 0; q--）mychoices.thirdchoice.options [q] = null;

}

//デフォルトの選択を追加 - 値がない場合に備えて

myelele = document.createelement_x（ "option"）;

myele.value = 0;

myele.text = "[list]";

controltopule.add（myele）;

for（x = 0; x <itemarray.length; x ++）

{

if（grouparray [x] == control.value）

{

myelele = document.createelement_x（ "option"）;

myele.value = x;

myele.text = itemArray [x];

controltopule.add（myele）;

}

}

}

//終了 - >

</script>

<form name = mychoices>

<table align = "center">

<tr>

<td>

<select id = firstchoice name = firstChoice onchange = "SelectChange（this、mychoices.secondchoice、arritems1、arritemsgrp1）;">

<オプション値= "0">リスト1 </option>

<オプション値= "1">リスト2 </option>

<オプション値= "2">リスト3 </option>

<オプション値= "3">リスト4 </option>

</select>

</td> <td>

<select id = secondchoice name = secondChoice onchange = "SelectChange（this、myChoices.thirdChoice、arritems2、arritemsgrp2）;">

</select>

<選択id = thirdchoice name = thirdchoice>

</select>

</td>

</tr>

</table>

</form>

この記事がみんなのJavaScriptプログラミングに役立つことを願っています。