<div class="codetitle"> <span><a style="CURSOR: pointer" data="22838" class="copybut" id="copybut22838" onclick="doCopy('code22838')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code22838"> <br><!DOCTYPE HTML PUBLIC "-//W3C/ /DTD HTML 4.01 Transitional//EN"> <br><html> <br><head> <br><title>menu2level.html</title> <br><meta http-equiv=" content-type " content="text/html; charset=UTF-8"> <br><script type="text/javascript"> <br>function loadXML(){ <br>var xmlDoc; <br>try{ <br>//IE <br>xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); <br>}catch(e){ <br>try{ <br>xmlDoc = document.implementation.createDocument(" "," ",null); <br>}catch(e){ <br>alert(e.message); <br>return; <br>} <br>} <br>xmlDoc.async=false; <br>xmlDoc .load("cities.xml"); <br>return xmlDoc <br>} <br>//웹페이지가 로드된 후 로드가 완료된 후 지역을 로드합니다. <br>onload=function( ){ <br>var xmlDocument = loadXML( ); var 지방Arr =xmlDocument.getElementsByTagName("province") <br>var proSize = 지방Arr.length; ;i ){ <br>//옵션 노드 생성<br>var optionElement = document.createElement("option") <br>var ProvinceName = ProvinceArr[i].getAttribute("name")// 텍스트 노드 생성<br>var textElement =document .createTextNode(provinceName); <br>optionElement.appendChild(textElement); <br>optionElement.setAttribute("value", ProvinceName); "province"); <br>node.appendChild(optionElement); <br>} <br>} <br>//지방 변경 이벤트<br>functionchangeProvince(node){ <br>//선택한 인덱스 가져오기 <br>var index = node.selectedIndex; <br>//해당 지역 이름 가져오기<br>var ProvinceName = node.options[index].value; <br>loadCities(provinceName); 🎜>//지방 번호 정보에 따라 도시 로드<br>function loadCities(proName){ <br>var xmlDocument = loadXML() <br>var ProvinceArr =xmlDocument.getElementsByTagName("province")// 도시의 요소 가져오기<br>var citySelectEle = document.getElementById("cities"); <br>var size = citySelectEle.options.length <br>for(var i=size;i>0;i-- ){ <br>citySelectEle.remove(i); <br>} <br><br>//지방 수 가져오기<br>var proSize = ProvinceArr.length; <br>var proElement; 해당 지역 요소 가져오기<br>for(var i =0;i<proSize;i ){ <BR>if(provinceArr[i].getAttribute("name")==proName){ <BR>proElement = ProvinceArr[ i]; <BR>break; <br>} <br>} <BR>//지방의 도시 정보 가져오기<BR>var cityArr = proElement.getElementsByTagName("city") <BR>var len = cityArr .length; <BR>for(var i=0;i< ;len;i ){ <BR>//옵션 노드 생성<BR>var optionElement = document.createElement("option")//가져오기 도시 이름<BR>var cityName = cityArr[i].firstChild.nodeValue; <BR>//텍스트 노드 생성<BR>var textElement =document.createTextNode(cityName) <BR>optionElement.appendChild(textElement); >optionElement.setAttribute("value", cityName); <BR> citySelectEle.appendChild(optionElement); <BR>} <BR>} <BR>function getValue(){ <BR>var pro = document.getElementById("province ").value; <BR>var city = document.getElementById( "cities").value; <BR>alert(pro ":" city); <BR>} <BR></script> <br>< ;/head> <br><br><body> <br><select id="province" onchange="changeProvince(this)"> </select> <br><select id="cities"><br><option value="" selected="selected"> --도시--</option> <br><input type="button" value="pop-up" onclick="getValue()"/> ;/body> <br></html> <br><br> <br>효과는 다음과 같습니다. <br>http://img.blog.csdn.net/20140315235043343?watermark/2/text/ aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0J BQkFCMA==/dissolve/70 /gravity/SouthEast <br>cities.xml 파일은 다음과 같습니다. <br><br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><div class="codebody" id="code14553"> <br><?xml version="1.0" 인코딩="UTF-8"?> <br><xml-body> <br><지방 이름="산시성"> 시안시> <br>바오지시> <br>옌안<br></province> <br><province name="Guangdong"> <br><city>Foshan</city> <br><city>Shenzhen</city> ;광저우</city> <br></city> <br></city><province name="Liaoning"> ; <br><city>Tieling</city> <br><city>Fushun</city> /xml-본문> <br><br></city> </div> </div>