이 예제는 참조에 대한 JS 구현 선택 보조 링크 드롭 다운 메뉴를 공유합니다. 특정 내용은 다음과 같습니다
<%@ page language = "java"import = "java.util.*"pageEncoding = "utf-8"%> <%string path = request.getContextPath (); String BasePath = request.getScheme ()+": //"+request.getServerName ()+":"+request.get.gteRverport () <! "-// w3c // dtml 4.01 Transitional // en"> <html> <head> <head> <title> 새 문서 </title> <meta name = "generator"content = "editplus"> <meta name = "onugly"content = "" "<javas name ="description "" "" "" "" "" "" "" "" "" "" "" "" "" ""meta 이름 "" type = "text/javaScript"> // 2 차원 도시 배열을 정의하고 그 순서는 지방의 순서와 동일합니다. SelectedIndex에 의해 해당 도시 배열 Var City = [ "Beijing", "Tianjin", "Shanghai", "Chongqing", "Nanjing", "Suzhou", "Nantong", "Changzhou"], [ "Fuzhou", "Longyan", "Nanping", "Nanning"], "Nantong", "Nantong"] [ "Guangzhou", "Chaoyang", "Chaozhou", "Chenghai"], [ "Lanzhou", "Baiyin", "Dingxi", "Dunhuang"]; 함수 getCity () {// 지방 드롭 다운 상자 var sltprovince = document.form1.province; // 도시 드롭 다운 상자의 객체를 가져옵니다. var sltcity = document.form1.city; // 해당 지방의 도시 배열 VAR을 얻습니다. // 시티 드롭 다운 상자를 지우고 프롬프트 옵션 SLTCity.length = 1 만 남겨 둡니다. // 도시 배열의 값을 도시 드롭 다운 상자에 채우십시오 (var i = 0; i <provincicity.length; i ++) {sltcity [i+1] = 새로운 옵션 (Provincecity [i], Provincecity [i]); }} </script> </head> <hod> <form 메소드 = post action = "name ="form1 "> <select name ="province "onchange ="getCity () "> <옵션 value ="0 "> 주를 선택하십시오. 지방 "> 후지안 지방 </옵션> <옵션 값 ="광동성 "> 광동성 </옵션> <옵션 값 ="Gansu Province "> Gansu Province> </select> <select> <city"> <옵션 값 = "0"> 당신의 도시를 선택하십시오 </옵션> </body> </html> </html>이 코드는 비교적 간단합니다.
JS에 익숙하지 않은 경우 JS 처리에 대한 다음 내용을 살펴볼 수 있습니다.
1. 선택한 index 속성을 사용하여 현재 옵션의 색인을 얻으십시오.
드롭 다운 상자의 옵션은 선형 어레이이며 각 옵션에는 인덱스가 있으며 선택된 index는 현재 선택된 옵션의 인덱스 번호를 나타냅니다. 옵션 속성과 결합하여 선택한 옵션 객체를 얻을 수 있도록 추가 처리 할 수 있습니다. 드롭 다운 상자가 다중 선택 가능하면 선택한 인덱스 속성은 첫 번째 선택된 인덱스를 반환합니다.
selectedIndex는 읽기 전용 속성입니다. 인덱스를 통해 선택한 상태로 지정된 드롭 다운 상자에 항목을 설정하려면 선택한 옵션 객체의 true를 설정하여 달성 할 수 있습니다.
2. 선택 객체에 옵션을 추가하십시오
sltcity [i+1] = 새로운 옵션 (Provincecity [i], 지방 [i]);
새로운 옵션 (Provincecity [i], 지방 [i])은 가치 주 [i]가있는 옵션 객체를 생성하는 것을 의미하며 텍스트는 지방 성 [i]입니다. sltcity는 페이지의 도시 대상입니다. I+1은 새로 추가 된 옵션의 위치를 지정합니다.
3. 선택된 개체를 지우십시오
드롭 다운 상자에서 모든 옵션을 삭제하는 두 가지 방법이 있습니다.
첫 번째 방법은 삭제를 가로 지르는 것입니다.
var l = mySelect.length; for (var i = 0; i <l; i ++) {mySelect.Options [i] = null; }두 번째 방법은 비교적 간단 하므로이 방법은 일반적으로 사용됩니다.
mySelect.length = 0;