이 글의 예시는 자바스크립트에서 다단계 연결 드롭다운 메뉴를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <br> <!-- 시작<br /> var arrItems1 = 새로운 배열();<br /> var arrItemsGrp1 = 새로운 배열();<br /> arrItems1[3] = "열 2";<br /> arrItemsGrp1[3] = 1;<br /> arrItems1[4] = "두 번째 열과 세 번째 열";<br /> arrItemsGrp1[4] = 1;<br /> arrItems1[5] = "열 24";<br /> arrItemsGrp1[5] = 1;<br /> arrItems1[6] = "3열";<br /> arrItemsGrp1[6] = 2;<br /> arrItems1[7] = "선삼이";<br /> arrItemsGrp1[7] = 2;<br /> arrItems1[0] = "열 4";<br /> arrItemsGrp1[0] = 3;<br /> arrItems1[1] = "L41";<br /> arrItemsGrp1[1] = 3;<br /> arrItems1[2] = "열 42";<br /> arrItemsGrp1[2] = 3;<br /> var arrItems2 = 새로운 배열();<br /> var arrItemsGrp2 = 새로운 배열();<br /> arrItems2[21] = "열 4-0";<br /> arrItemsGrp2[21] = 0<br /> arrItems2[22] = "열 4-1";<br /> arrItemsGrp2[22] = 0<br /> arrItems2[31] = "열 41-0";<br /> arrItemsGrp2[31] = 1<br /> arrItems2[34] = "열 41-1";<br /> arrItemsGrp2[34] = 1<br /> arrItems2[35] = "열 42-0";<br /> arrItemsGrp2[35] = 2<br /> arrItems2[99] = "열 24-2";<br /> arrItemsGrp2[99] = 5<br /> arrItems2[100] = "열 24-1";<br /> arrItemsGrp2[100] = 5<br /> arrItems2[57] = "열 24-0";<br /> arrItemsGrp2[57] = 5<br /> arrItems2[101] = "열 2-0";<br /> arrItemsGrp2[101] = 3<br /> arrItems2[102] = "열 2-1";<br /> arrItemsGrp2[102] = 3<br /> arrItems2[103] = "열 23-0";<br /> arrItemsGrp2[103] = 4<br /> arrItems2[104] = "열 23-1";<br /> arrItemsGrp2[104] = 4<br /> arrItems2[105] = "열 3-0";<br /> arrItemsGrp2[105] = 6<br /> arrItems2[106] = "3-1열";<br /> arrItemsGrp2[106] = 6<br /> arrItems2[200] = "31-0열";<br /> arrItemsGrp2[200] = 7<br /> arrItems2[201] = "31-1열";<br /> arrItemsGrp2[201] = 7<br /> arrItems2[203] = "31-2열";<br /> arrItemsGrp2[203] = 7<br /> 함수 selectChange(control, controlToPopulate, ItemArray, GroupArray)<br /> {<br /> var myEle ;<br /> var x ;<br /> // 선택 항목의 두 번째 드롭다운 상자를 비웁니다<br /> (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;<br> if (control.name == "firstChoice") {<br> // 선택 항목의 세 번째 드롭다운 상자를 비웁니다<br> (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;<br> }<br> // 기본 선택 추가 - 값이 없는 경우<br> myEle = document.createElement_x("option") ;<br> myEle.value = 0 ;<br> myEle.text = "[목록]" ;<br> controlToPopulate.add(myEle) ;<br> for( x = 0 ; x < ItemArray.length ; x )<br /> {<br /> If (GroupArray[x] == control.value)<br /> {<br /> myEle = document.createElement_x("option");<br /> myEle.value = x ;<br /> myEle.text = ItemArray[x];<br /> controlToPopulate.add(myEle) ;<br /> }<br /> }<br /> }<br /> // 끝 --><br> <br> <양식 이름=myChoices><br> <테이블 정렬="중앙"><br> <tr><br> <td><br> <SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);"><br> <옵션 값="0">목록 1</옵션><br> <옵션 값="1">목록 2</옵션><br> <옵션 값="2">목록 3</옵션><br> <옵션 값="3">목록 4</옵션><br> </선택><br> <td> <br> <SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);"><br> </선택><br> <SELECT id=thirdChoice 이름=thirdChoice><br> </선택><br> </TD><br> </TR><br> </표><br> </양식><br> <p>이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다. </p> </td> </div>
