<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> <br> <br> <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(); <BR>var provinceArr> .getElementsByTagName("province"); <BR>var proSize = provinceArr.length; <BR>for(var i=0;i<proSize;i ){ <BR>//建立節點<BR>var optionElementi ){ <BR>//建立節點<BR>var optionElement = document .createElement("option"); <BR>var provinceName = provinceArr[i].getAttribute("name"); <BR>//建立文字節點<BR>var textElement =document.createTextNode(provinceName) <BR> optionElement.appendChild(textElement); <BR>optionElement.setAttribute("value", provinceName); <BR>var node = document.getElementById("province"); <BR>node.appendChild(optionElement); <BR>} <BR>//省份改變事件<BR>function changeProvince(node){ <BR>//取得選擇的角標<BR>var index = node.selectedIndex; <BR>//取得對應的省份名<BR>var provinceName = node.options[index].value; <BR>loadCities(provinceName); <br>} <br><BR>//依照省份編號載入城市資訊<BR>function loadCities(proName) { <BR>var xmlDocument = loadXML(); <BR>var provinceArr =xmlDocument.getElementsByTagName("province"); <BR>//取得城市的元素<BR>var citySelectEle = document.getElementBy(" <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>//取得對應的省份元素<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 citiesArr = proElement.getElementsByTagName("city"); <BR>var len = citiesArr.length; <BR>for(var i=0;i<len;i ){ <BR> //建立option節點<BR>var optionElement = document.createElement("option"); <BR>//取得城市名<BR>var cityName = citiesArr[i].firstChild.nodeValue; <BR>//建立文字節點<BR>var textElement =document.createTextNode(cityName); <BR>optionElement.appendChild(textElement); <BR>optionElement.setAttribute("value", cityName); <BR>ChiSelectEle.appendend; >} <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> <br><br> <br><select id="province" onchange=" changeProvince(this)"> <br><option value="" selected>--省份--</option> <br></select> <br><select id="cities"> <br><option value="" selected>--城市--</option> <br></select> <br><input type="button" value="彈出" onclick="getValue() "> <br> <br> <br> </div> <br>效果如下： <br>http://img.blog.csdn.net/20140315235043343?watermark/2/ text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Apter> <br><br>複製程式碼<div class="codetitle"><span><a style="CURSOR: pointer" data="14553" class="copybut" id="copybut14553" onclick="doCopy('code14553')"> 程式碼如下:<u><div class="codebody" id="code14553"> <br><?xml version="1.0" encoding="UTF-8"?> <br><xml-body> <br><province name="陝西"> <br><city>西安 <br><city>漢中</city> <br><city>寶雞</city> <br><city>延安</city> <br></city></province> <br><province name="廣東"> <br><city>佛山</city> <br><city>深圳</city> <br><city>廣州</city> <br><city>汕頭</city> <br></province> <br><province name="遼寧"> <br><city>大連</city> <br><city>鐵嶺</city> <br><city>鞍山</city> <br><city>撫順</city> <br></province> <br></xml-body> <br> </div></u></a></span></div>
