Javascript reads the Xml file to make an example of a secondary linkage menu

2020-03-30 02:22:34
OfStack

 
<!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; 
} 
//The page loads after the load completes
onload=function(){ 
var xmlDocument = loadXML(); 
var provinceArr =xmlDocument.getElementsByTagName("province"); 
var proSize = provinceArr.length; 
for(var i=0;i<proSize;i++){ 
//Create option node
var optionElement = document.createElement("option"); 
var provinceName = provinceArr[i].getAttribute("name"); 
//Create a text node
var textElement =document.createTextNode(provinceName); 
optionElement.appendChild(textElement); 
optionElement.setAttribute("value", provinceName); 
var node = document.getElementById("province"); 
node.appendChild(optionElement); 
} 
} 
//Province change event
function changeProvince(node){ 
//Gets the selected corner marker
var index = node.selectedIndex; 
//Gets the corresponding province name
var provinceName = node.options[index].value; 
loadCities(provinceName); 
} 

//Load the city information according to the province number
function loadCities(proName){ 
var xmlDocument = loadXML(); 
var provinceArr =xmlDocument.getElementsByTagName("province"); 
//Gets the elements of the city
var citySelectEle = document.getElementById("cities"); 
var size = citySelectEle.options.length; 
for(var i=size;i>0;i--){ 
citySelectEle.remove(i); 
} 

//Gets the number of provinces
var proSize = provinceArr.length; 
var proElement; 
//Gets the corresponding province element
for(var i=0;i<proSize;i++){ 
if(provinceArr[i].getAttribute("name")==proName){ 
proElement = provinceArr[i]; 
break; 
} 
} 
//Get the city information of the province
var citiesArr = proElement.getElementsByTagName("city"); 
var len = citiesArr.length; 
for(var i=0;i<len;i++){ 
//Create option node
var optionElement = document.createElement("option"); 
//Get the city name
var cityName = citiesArr[i].firstChild.nodeValue; 
//Create a text node
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">-- provinces --</option> 
</select> 
<select id="cities"> 
<option value="" selected="selected">-- city --</option> 
</select> 
<input type="button" value=" The pop-up " onclick="getValue()"/> 
</body> 
</html>

The effect is as follows:
http://img.blog.csdn.net/20140315235043343? Watermark / 2 / text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE = / font / 5 a6l5l2t/fontsize / 400 / fill/I0JBQkFCMA = = / dissolve / 70 / gravity/SouthEast
Cities. XML file is as follows:

 
<?xml version="1.0" encoding="UTF-8"?> 
<xml-body> 
<province name=" shaanxi "> 
<city> Xi 'an </city> 
<city> Hanzhong city </city> 
<city> baoji </city> 
<city> yanan </city> 
</province> 
<province name=" guangdong "> 
<city> foshan </city> 
<city> shenzhen </city> 
<city> Guangzhou </city> 
<city> shantou </city> 
</province> 
<province name=" liaoning "> 
<city> dalian </city> 
<city> tieling </city> 
<city> anshan </city> 
<city> fushun </city> 
</province> 
</xml-body>