快捷導(dǎo)航

javascript讀取Xml文件做一個二級聯(lián)動菜單示例

更新時間：2014年03月17日 15:14:56 作者：

這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個二級聯(lián)動菜單,需要的朋友可以參考下

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>menu2level.html</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
function loadXML(){ 
var xmlDoc; 
try{ 
//IE 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
}catch(e){ 
try{ 
xmlDoc = document.implementation.createDocument("","",null); 
}catch(e){ 
alert(e.message); 
return; 
} 
} 
xmlDoc.async=false; 
xmlDoc.load("cities.xml"); 
return xmlDoc; 
} 
//網(wǎng)頁加載完在加載 完成省份加載 
onload=function(){ 
var xmlDocument = loadXML(); 
var provinceArr =xmlDocument.getElementsByTagName("province"); 
var proSize = provinceArr.length; 
for(var i=0;i<proSize;i++){ 
//創(chuàng)建option節(jié)點(diǎn) 
var optionElement = document.createElement("option"); 
var provinceName = provinceArr[i].getAttribute("name"); 
//創(chuàng)建文本節(jié)點(diǎn) 
var textElement =document.createTextNode(provinceName); 
optionElement.appendChild(textElement); 
optionElement.setAttribute("value", provinceName); 
var node = document.getElementById("province"); 
node.appendChild(optionElement); 
} 
} 
//省份改變事件 
function changeProvince(node){ 
//獲取選擇的角標(biāo) 
var index = node.selectedIndex; 
//獲取對應(yīng)的省份名 
var provinceName = node.options[index].value; 
loadCities(provinceName); 
} 

//根據(jù)省份編號加載城市信息 
function loadCities(proName){ 
var xmlDocument = loadXML(); 
var provinceArr =xmlDocument.getElementsByTagName("province"); 
//獲取城市的元素 
var citySelectEle = document.getElementById("cities"); 
var size = citySelectEle.options.length; 
for(var i=size;i>0;i--){ 
citySelectEle.remove(i); 
} 

//獲取省份的個數(shù) 
var proSize = provinceArr.length; 
var proElement; 
//獲取對應(yīng)的省份元素 
for(var i=0;i<proSize;i++){ 
if(provinceArr[i].getAttribute("name")==proName){ 
proElement = provinceArr[i]; 
break; 
} 
} 
//獲取省份的城市信息 
var citiesArr = proElement.getElementsByTagName("city"); 
var len = citiesArr.length; 
for(var i=0;i<len;i++){ 
//創(chuàng)建option節(jié)點(diǎn) 
var optionElement = document.createElement("option"); 
//獲取城市名 
var cityName = citiesArr[i].firstChild.nodeValue; 
//創(chuàng)建文本節(jié)點(diǎn) 
var textElement =document.createTextNode(cityName); 
optionElement.appendChild(textElement); 
optionElement.setAttribute("value", cityName); 
citySelectEle.appendChild(optionElement); 
} 
} 
function getValue(){ 
var pro = document.getElementById("province").value; 
var city = document.getElementById("cities").value; 
alert(pro+":"+city); 
} 
</script> 
</head> 

<body> 
<select id="province" onchange="changeProvince(this)"> 
<option value="" selected="selected">--省份--</option> 
</select> 
<select id="cities"> 
<option value="" selected="selected">--城市--</option> 
</select> 
<input type="button" value="彈出" onclick="getValue()"/> 
</body> 
</html> 

效果如下：
http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
cities.xml文件如下：

復(fù)制代碼代碼如下:

 
<?xml version="1.0" encoding="UTF-8"?> 
<xml-body> 
<province name="陜西"> 
<city>西安</city> 
<city>漢中</city> 
<city>寶雞</city> 
<city>延安</city> 
</province> 
<province name="廣東"> 
<city>佛山</city> 
<city>深圳</city> 
<city>廣州</city> 
<city>汕頭</city> 
</province> 
<province name="遼寧"> 
<city>大連</city> 
<city>鐵嶺</city> 
<city>鞍山</city> 
<city>撫順</city> 
</province> 
</xml-body> 