이 기사의 예는 참조에 대한 JS 드롭 다운 메뉴의 특수 효과를 공유합니다. 특정 내용은 다음과 같습니다
예 1 : 연결된 지방 및 시립 드롭 다운 메뉴
onchange 이벤트는 도메인의 내용이 변경 될 때 발생합니다.
<script type = "text/javaScript"> var arr = new Array (); // 데이터 배열 // 데이터 정의, 구조 정의 : ID, 이름, 부모 ID ARR [arr.length] = [1, 'Beijing', null]; arr [arr.length] = [2, 'sichuan', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, '베이징', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; // 풀다운 항목 함수의 동적 설정 FillOptions (type) {if (type == 'province') {// 지방 드롭 다운 메뉴 var province = document.getElementById ( "province"); Province.innerhtml = ''; // 컨텐츠 비어 먼저 // 하위 문자 Var var var var var var vart = '<옵션 값 = ""> </옵션>'; // (var i = 0; i <arr.length; i ++) {var item = arr [i]; // 현재 항목 // 상위 ID가없는 경우, IF (item [2] == null) prostr+= '<옵션 값 ='+항목 [0]+'>'+항목 [1]+'</옵션>'; } province.innerhtml = prostr; // 새 콘텐츠를 채우십시오} else if (type == 'city') {// 현재 지방의 ID를 가져옵니다. if (currproid == '') false를 반환합니다. // 도시 드롭 다운 메뉴의 DOM을 가져옵니다. Var City = Document.getElementById ( "City"); city.innerhtml = ''; // 컨텐츠를 먼저 채우십시오 // 문자를 채우십시오 var citystr = '옵션 값 = "" "> </옵션>'; // (var i = 0; i <arr.length; i ++) {var item = arr [i]; // 현재 항목 // 현재 저장된 도시인지 판단합니다. (항목 [2] == curproid) citystr+= '옵션 값 ='+항목 [0]+'>'+항목 [1]+'</옵션>'; } city.innerhtml = citystr; // 새 컨텐츠를 채우는}}} </script> <body style = "text-align : center;" onload = "fillOptions ( 'province');"> <!-드롭 다운 메뉴-> 저축 : <select id = "province"onchange = "filloptions ( 'city')"> </select> <br/ <br/> city : <city "> </select> <br/> <br/> </body>예 2 : 지방, 도시 및 카운티 드롭 다운 메뉴의 3 단계 연계
<script type = "text/javaScript"> var arr = new Array (); // 데이터 배열 // 데이터 정의, 구조 정의 : ID, 이름, 부모 ID ARR [arr.length] = [1, 'Beijing', null]; arr [arr.length] = [2, 'sichuan', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, '베이징', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'Guangzhou', 3]; arr [arr.length] = [7, 'shenzhen', 3]; arr [arr.length] = [8, 'Wuhou District', 5]; arr [arr.length] = [9, 'Qingyang District', 5]; arr [arr.length] = [10, 'Baiyun District', 6]; arr [arr.length] = [11, 'Zengcheng City', 6]; arr [arr.length] = [12, 'Conghua City', 6]; // 풀다운 프로젝트 기능의 동적 설정 FillOptions (type) {if (type == 'province') {// 지방 드롭 다운 메뉴 var province = document.getElementById ( "province"); Province.innerhtml = ''; // 내용이 비어 있습니다. 먼저 // 저장된 var prostr = '옵션 값 = ""> </옵션>'; for (var i = 0; i <arr.length; i ++) {// 배열 var item = arr [i]; // 현재 항목 // 상위 ID가없는 경우, IF (item [2] == null) prostr+= '<옵션 값 ='+항목 [0]+'>'+항목 [1]+'</옵션>'; } province.innerhtml = prostr; // 새 컨텐츠를 작성} else if (type == 'city') {// 현재 지방의 ID를 가져옵니다. var curproid = document.getElementById ( "province"). if (currproid == '') false를 반환합니다. // 도시 드롭 다운 메뉴의 DOM을 가져옵니다. Var City = Document.getElementById ( "City"); city.innerhtml = ''; // 콘텐츠 비어 먼저 // 도시 문자를 채우십시오. var citystr = '옵션 값 = "" "> </옵션>'; for (var i = 0; i <arr.length; i ++) {// 배열 var item = arr [i]; // 현재 항목 // 현재 저장된 도시인지 판단합니다. if (Item [2] == curproid) citystr+= '옵션 value ='+항목 [0]+'>'+항목 [1]+'</옵션>'; } city.innerhtml = citystr; // 새 컨텐츠를 채우십시오} else if (type == 'area') {// 현재 도시의 ID를 가져옵니다. var currcityId = docum if (currcityId == '') false를 반환합니다. // 지구 및 카운티 드롭 다운 메뉴의 DOM을 가져옵니다. var are = document.getElementById ( "Area"); area.innerhtml = ''; // 지구 및 카운티 문자를 채우십시오 var areattr = '옵션 값 = ""> </옵션>'; for (var i = 0; i <arr.length; i ++) {// 배열 var item = arr [i]; // 현재 항목 // 현재 도시 하의 지구인지 카운티인지 판단합니다. } area.innerhtml = arevertr; // 새 컨텐츠 채우기}}} </script> <body style = "text-align : center;" onload = "fillOptions ( 'province');"> <!-드롭 다운 메뉴-> 지방 : <select id = "province"onchange = "filloptions ( 'city')"> </select> <br/ <br/> city : <select id = "city"onchange = "filloptions ( 'area')"> <br/> county/adctive : <br/> id = "area"> </select> <br/> <br/> </body>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.