>  기사  >  웹 프론트엔드  >  자바스크립트 2차원 array_javascript 스킬로 구현한 시,도 연계 메뉴

자바스크립트 2차원 array_javascript 스킬로 구현한 시,도 연계 메뉴

WBOY
WBOY원래의
2016-05-16 16:49:271857검색

코드 복사 코드는 다음과 같습니다.




여기에 제목 삽입<br><script type="text /javascript">//도시 목록 항목을 저장하기 위한 2차원 배열 초기화<BR>var 도시=[ <BR>["Anqing","Hefei","Tongcheng"], <BR>[" Shijiazhuang","Baoding" ","Tangshan"], <BR>["Zhengzhou","Luoyang","Kaifeng"] <BR>] <BR>//성 선택 시 추가 방법을 호출합니다. 도시<BR>function ProvinceChanged( sel){ <BR>//alert("select length" sel.options.length); <BR>//sel은 실제로 선택 개체입니다<BR>//옵션 컬렉션을 탐색하고 선택한 옵션 찾기<BR>for( var x=0;x<sel.options.length;x ) <BR>{ <BR>var opt=sel.options[x] <BR>if(opt.selected) <BR>{ <BR>// 선택한 도시 선택 항목에 옵션 추가 <BR>addCityToSelect(x) <BR>} <BR>} <BR>} <BR>//선택한 지방 아래의 도시 항목을 도시 선택 <BR>function addCityToSelect (x){ <BR>//2차원 배열에서 해당 도시 찾기 <BR>var city=cities[x-1] <BR>var citySelect=document.getElementById(" select_city"); <BR> /*==================노드에 이미 존재하는 요소 삭제================ = <BR>두 번째 또는 n번째 메소드를 호출하면 이전에 추가한 노드가 도시 선택 객체에 추가되었으므로 삭제됩니다. <BR> 아이디어 1: 객체의 RemoveChild()를 선택하여 루프 순회를 통해 바이트 포인트를 삭제할 수 있습니다. <BR> 아이디어 2: select.options.length=1을 직접 설정하면 동일한 효과를 얻을 수 있습니다. <BR>*/ <BR>//도시 선택 개체 아래의 옵션 길이를 1로 설정 <BR>citySelect.options.length=1 <BR>//옵션 컬렉션의 길이를 설정하고 삭제 <BR>/ /citySelect .options.length=1; <BR>for(var x=0;x<city.length;x ) <BR>{ <BR>//요소 노드 객체 생성<BR>var optionName=document.createElement( "option");//옵션 표시 내용 설정<BR>optionName.innerHTML=city[x] <BR>//선택할 옵션 추가 <BR>citySelect.appendChild(optionName); 🎜> /* <BR>여기서 특정 주 아래의 모든 도시를 citySelect 개체에 추가합니다. <BR> 두 번째로 두 번째 주를 선택하면 두 번째 주 아래의 모든 도시가 아래로 추가됩니다. <BR>citySelect 노드. 이 효과는 잘못되었습니다. 따라서 추가할 때마다 <BR> citySelect 노드 아래의 콘텐츠를 지워야 합니다. 다음 보기: <BR>==================노드에 이미 존재하는 요소 삭제=============== <BR> * / <BR>} <BR>} <BR></script> <BR></head> <BR><body><select onchange="provinceChanged(this);"> <BR><!--의미: 선택 개체가 ProvinceChanged(this)를 호출하고 이 메서드에서 <BR>가 개체 자체를 매개 변수로 전달하여 작업을 수행한다는 의미입니다. --> 옵션</option> <BR></select><select id="select_city"><BR><option>도시를 선택하세요</option> ;/ 선택> <BR></body> <BR><BR><BR></script>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.