javascript与xml实现二级联动

周一Monday

浏览: 346018 次
来自: 北京

最近访客更多访客>>

浅绿蓂荚

tudou110

mrjacro

foreach4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript&jQuery

javascript xml

1.city.xml

<?xml version="1.0" encoding="GB2312"?>
<china>
	<province name="吉林省">
		<city>长春</city>
		<city>四平</city>
		<city>通化</city>
	</province>
	<province name="辽宁省">
		<city>沈阳</city>
		<city>大连</city>
		<city>鞍山</city>
	</province>
	<province name="山东省">
		<city>济南</city>
		<city>青岛</city>
		<city>威海</city>
	</province>
</china>

2.city.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
	   <option value="吉林省">吉林省</option>
	   <option value="辽宁省">辽宁省</option>
	   <option value="山东省">山东省</option>
     </select>
	 <select id="city" name="city">
	 	<option value="">请选择.....</option>
	 </select>
  </body>
  
    <script type="text/javascript">
     window.onload=function(){
	      document.getElementById("province").onchange=function(){
		  	
			  //取得省值
		  	  var selectProvince=this.value;
			  
			  //获取城市节点
			  var cityElement=document.getElementById("city");

			 //删除的时候从后往前删
			  var cityOptionElements=cityElement.getElementsByTagName("option");
			  for(var i=cityOptionElements.length-1;i>0;i--){
			  	  cityElement.removeChild(cityOptionElements[i]);
			  }
			  
			  //解析xml文件
			  var xmlDoc=parseXML("city.xml");
			  
			  //声明省的节点
			   var provinceElement=null;
	
			  //解析XML节点
			  var provinceXmlElements=xmlDoc.getElementsByTagName("province");
			  for(var i=0;i<provinceXmlElements.length;i++){
			     var provinceXmlElement=provinceXmlElements[i];
				 var xmlNameValue=provinceXmlElement.getAttribute("name");
				 if(selectProvince==xmlNameValue){
					provinceElement=provinceXmlElement;
					break;
				 }
			  }
			  
			 //在城市下增加option元素
			  if(provinceElement!=null){
                  var cityXmlElements=provinceElement.getElementsByTagName("city");	
				  for(var i=0;i<cityXmlElements.length;i++){
				  	 var cityXmlElement=cityXmlElements[i];
					 var cityxmlValue=cityXmlElement.firstChild.nodeValue;
					 var optionElement=document.createElement("option");
					 optionElement.setAttribute("value",cityxmlValue);
					 var textElement=document.createTextNode(cityxmlValue);
					 optionElement.appendChild(textElement);
					 cityElement.appendChild(optionElement);
				  }	
			  }
		  }  	
	 }	
	 
	 //解析xml文件
	 function parseXML(filename){
	     var xmlDoc;
	     try{
		 	  //Internet Explorer
		 	 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		 }
	      catch(e){
	           try{
	  				//Firefox, Mozilla, Opera, etc.
		   			 xmlDoc=document.implementation.createDocument("","",null);
			   }
	          catch(e){}
	       }
		 
		 //关闭异步加载
	     xmlDoc.async=false;
	     xmlDoc.load(filename);
         return  xmlDoc; 
	 }
  </script>


</html>

实现三级联动： http://1194867672-qq-com.iteye.com/blog/1154154