この記事では、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プログラミングに役立つことを願っています。