使用javascript中读取Xml文件做成的一个二级联动菜单

<!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;
		}
		//网页加载完在加载  完成省份加载
		onload=function(){
			var xmlDocument = loadXML();
			var provinceArr =xmlDocument.getElementsByTagName("province");
			var proSize = provinceArr.length;
			for(var i=0;i<proSize;i++){
				//创建option节点
				var optionElement = document.createElement("option");
				var provinceName = provinceArr[i].getAttribute("name");
				//创建文本节点
				var textElement =document.createTextNode(provinceName);
				optionElement.appendChild(textElement);
				optionElement.setAttribute("value", provinceName);
				var node = document.getElementById("province");
				node.appendChild(optionElement);
			}   
		}
		//省份改变事件
		function changeProvince(node){
			//获取选择的角标
			var index = node.selectedIndex;
			//获取对应的省份名
			var provinceName = node.options[index].value;
			loadCities(provinceName);
		}
		
		//根据省份编号加载城市信息
		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);
			}
			
			//获取省份的个数
			var proSize = provinceArr.length;
			var proElement;
			//获取对应的省份元素
			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++){
				//创建option节点
				var optionElement = document.createElement("option");
				//获取城市名
				var cityName = citiesArr[i].firstChild.nodeValue;
				//创建文本节点
				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>

 

效果如下:

   使用javascript中读取Xml文件做成的一个二级联动菜单_第1张图片

cities.xml文件如下:

<?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>



 

你可能感兴趣的:(使用javascript中读取Xml文件做成的一个二级联动菜单)