JS操作XML对象+城市连动实例

于 2012-02-22 21:36:28 发布
阅读量5.3k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： xml function null html 浏览器 stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangshuaipeng/article/details/7285037

一、JS解析xml文件分析：

a) Html文件和xml文件都是文档，都应该有自己的文档对象，html文件document文档对象节点，而xml需要创建

b) 浏览器分析，不同的浏览器，创建方法不同。

IE：  newActiveXObject("控件名称")  //Mircrosoft.XMLDOM

非IE，如：firfox

document.implementation.createDocument("","",null)

c) 当创建完毕，必须要设置设置成同步处理

将async设置为false

d) 利用load方法加载xml文件

二、定义固定方法

function parseXml(parseName){

   var xmlDoc;

   try{

   //IE浏览器

   xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

   }catch(e){

   try{  

   xmlDoc=document.implementation.createDocument("", "", null);

   }catch(e){

   alert("创建失败");

   }

   }

   //设置成同步处理

   xmlDoc.async=false;

   xmlDoc.load(parseName);

  

   return xmlDoc;

   }

三、城市连动的源码展示，三级连动

a) Xml文件的节点展示：

<?xml version="1.0" encoding="UTF-8"?>
<china>
	<province name="河北">
		<city name="石家庄">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="邢台">
			<county>平县</county>
			<county>XX县</county>
		</city>
		<city name="邯郸">
			<county>邯郸县</county>
			<county>永年县</county>
			<county>肥乡县</county>
			<county>广平县</county>
			<county>大名县</county>
			<county>成安县</county>
		</city>
		<city name="保定">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="廊坊">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="衡水">
			<county>XX县</county>
			<county>YY县</county>
		</city>
	</province>
	<province name="北京">
		<city name="大兴">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="房山">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="平谷">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="昌平">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="朝阳">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="海淀">
			<county>XX县</county>
			<county>YY县</county>
		</city>
	</province>
	<province name="河南">
		<city name="开封">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="商丘">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="驻马店">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="平顶山">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="洛阳">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="郑州">
			<county>XX县</county>
			<county>YY县</county>
		</city>
	</province>
	<province name="安徽">
		<city name="阜阳">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="亳州">
			<county>XX县</county>
			<county>YY县</county>
		</city>
		<city name="合肥">
			<county>XX县</county>
			<county>YY县</county>
		</city>
	</province>
	</china>
b)html源码展示  

<!DOCTYPE html>
<html>
  <head>
    <title>city.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <select id="province">
    	<option value=-1>请选择省</option>
    </select>
    <select id="city">
    	<option value=-1>请选择市</option>
    </select>
    <select id="county">
    	<option value=-1>请选择县</option>
    </select>
  </body>
  <script type="text/javascript">
  <!--
  	window.onload=function(){
  		var xmlDoc=parseXml("cities.xml");
  		//获取省 xml
  		var provinceNodes=xmlDoc.getElementsByTagName("province");
  		//添加省节点 html
  		var provinceNode=document.getElementById("province");
  		//添加市节点html
  		var cityNode=document.getElementById("city");
  		//添加县节点html
  		var countyNode=document.getElementById("county");
  		for(var i=0;i<provinceNodes.length;i++){
  			var optionNode=document.createElement("option");
  			optionNode.setAttribute("value",provinceNodes[i].getAttribute("name"));
  			optionNode.appendChild(document.createTextNode(provinceNodes[i].getAttribute("name")));
  			provinceNode.appendChild(optionNode);
  		}
  		provinceNode.onchange=function(){
  			//var selectOption=this.options[this.selectedIndex];
  			//if(this.value!=-1){
  				//清空市区
  				removeCity(cityNode);
  				removeCounty(countyNode);
  				for(var i=0;i<provinceNodes.length;i++){
  					if(this.value==provinceNodes[i].getAttribute("name")){
 							var cityNodes=provinceNodes[i].getElementsByTagName("city");
 							//清空市区
 							//cityNode.length=0;
 							//var optionOne=document.createElement("option");
 							//optionOne.appendChild(document.createTextNode("请选择市"));
 							//cityNode.appendChild(optionOne);
 							 //清空 select
				        	  //获取你 清空的 select 里边的所有的option节点对象
 							for(var i=0;i<cityNodes.length;i++){
	 							var optionNode=document.createElement("option");
	 							optionNode.setAttribute("value", cityNodes[i].getAttribute("name"));
	 							optionNode.appendChild(document.createTextNode(cityNodes[i].getAttribute("name")));				
 								cityNode.appendChild(optionNode);
 							}
  					}
  				}
  			//}
  		
  		};
  		cityNode.onchange=function(){
  			//查找到对应的省份
  			//if(this.value!=-1){
  				//清除县
	  			removeCounty(countyNode);
	  			for(var i=0;i<provinceNodes.length;i++){
	  					if(provinceNode.value==provinceNodes[i].getAttribute("name")){
	  						var citiesNodes=provinceNodes[i].getElementsByTagName("city");
	  						for(var j=0;j<citiesNodes.length;j++){
	  							if(this.value==citiesNodes[j].getAttribute("name")){
	  								var countyNodes=citiesNodes[j].getElementsByTagName("county");
	  								for(var m=0;m<countyNodes.length;m++){
	  									var countyOption=document.createElement("option");
	  									countyOption.appendChild(document.createTextNode(countyNodes[m].firstChild.nodeValue));
	  									countyNode.appendChild(countyOption);
	  								}
	  							}
	  						
	  						}
	  					}
	  			}
  			//}
  		};
  	};
  	function removeCity(cityNode){
	 	var cityhtmlOptionNodes = cityNode.getElementsByTagName("option");
		//获取长度
		var len = cityhtmlOptionNodes.length;
		//遍历
		for(var m=0;m<len;m++){
		// 0 是有第二个对象 cityhtmlOptionNodes[1] 代表第二个对象  不为null  true   null false
			if(cityhtmlOptionNodes[1]){
				//始终移除第二个对象
				cityNode.removeChild(cityhtmlOptionNodes[1]);
			}
		} 		
  	
  	}
  	function removeCounty(countyNode){
  		//清除县
	  	var countyOptionNodes = countyNode.getElementsByTagName("option");
		//获取长度
		var len = countyOptionNodes.length;
		//遍历
		for(var m=0;m<len;m++){
		// 0 是有第二个对象 cityhtmlOptionNodes[1] 代表第二个对象  不为null  true   null false
			if(countyOptionNodes[1]){
			//始终移除第二个对象
				    countyNode.removeChild(countyOptionNodes[1]);
			}
		}
  	}
  	//JS解析xml文件
  	/*
  	*	html文件  document 文档对象  节点
  	*	xml 文件  需要创建
  	*	不同浏览器  创建方法不同
  	*  IE: new ActiveXObject("控件名称");//Microsoft.XMLDOM
  	*  firfox   非IE
  	*  document.implementation.createDocument("","",null);
  	*/
  	//声明解析XML文件方法
  	function parseXml(parseName){
  		var xmlDoc;
  		try{
  			//IE浏览器
  			xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  		}catch(e){
  			try{  			
  			xmlDoc=document.implementation.createDocument("", "", null);
  			}catch(e){
  				alert("创建失败");
  			}
  		}
  		//设置成同步处理
  		xmlDoc.async=false;
  		xmlDoc.load(parseName);
  		
  		return xmlDoc;
  	}
  	
  //-->
  </script>
</html>



张帅鹏
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值