JavaScript에서 다단계 연결 드롭 다운 메뉴를 구현하는 방법

이 기사에서는 JavaScript에서 다단계 링키지 드롭 다운 메뉴를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

코드 사본은 다음과 같습니다.

<script language = "javaScript">

<!- ​​시작

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] = "열 삼위 일체";

arritemsgrp1 [7] = 2;

arritems1 [0] = "열 4";

arritemsgrp1 [0] = 3;

arritems1 [1] = "열 4 개";

arritemsgrp1 [1] = 3;

arritems1 [2] = "열 42";

arritemsgrp1 [2] = 3;

var arritems2 = 새로운 배열 ();

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;

// 선택의 두 번째 드롭 다운 상자를 비우십시오.

for (var q = controlTopopulate.options.length; q> = 0; q-) controlTopopulate.Options [q] = null;

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

// 선택의 세 번째 드롭 다운 상자를 비우십시오.

for (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);

for (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);

}

}

}

// 종료 ->

</스크립트>

<양식 이름 = mychoices>

<테이블 align = "Center">

<tr>

<td>

<select id = firstchoice name = firstchoice onchange = "selectchange (this, mychoices.secondchoice, arritems1, arritemsgrp1);">

<옵션 값 = "0"> 목록 One </옵션>

<옵션 값 = "1"> 목록 2 </옵션>

<옵션 값 = "2"> 목록 3 </옵션>

<옵션 값 = "3"> 목록 4 </옵션>

</선택>

</td> <td>

<select id = secondchoice name = secondChoice onchange = "selectChange (this, mychoices.thirdchoice, arritems2, arritemsgrp2);">

</선택>

<id = thirdChoice name = ThirdChoice>를 선택하십시오

</선택>

</td>

</tr>

</테이블>

</form>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.