用dom解析xml的方法实现省市县三级菜单级联

昨天用dom解析xml实现了二级菜单级联,今天用dom解析xml的方法实现省市县三级菜单级联

 

代码如下:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
    <div>
			<span> <select id="sheng" style="width: 100px;">

				</select> </span>
			<span> <select id="shi" style="width: 100px;">
				</select> </span>

			<span> <select id="xian" style="width: 100px;">

				</select> </span>
		</div>
  </body>
</html>
<script type="text/javascript">
<!--
//获取xmldom对象
function getXmlDom(){
	var xmlDom;
	try{
		//IE浏览器
		xmlDom=new ActiveXObject("Microsoft.XMLDOM");
	}catch(err){
		try{
			//firefox其他浏览器
			xmlDom=document.implementation.createDocument("","",null);
		}catch(e){
			alert("您的浏览器不支持xmlHTTPrequest......")
		}
	}
	//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
	xmlDom.async=false;
	//转载xml文件
	xmlDom.load("city.xml");
	return xmlDom;
}
window.onload=function(){
	//通过方法获取对象
	var xmlDom=getXmlDom();
	//获取xml文件的根节点
	var root=xmlDom.documentElement;
	//获取所有的省节点
	var provinces=root.childNodes;
	//获取页面中要显示的省的控件都dom对象
	var sheng=document.getElementById("sheng");
	//获取页面中要显示的市的控件都dom对象
	var shi=document.getElementById("shi");
	//获取页面中要显示的县的控件都dom对象
	var xian=document.getElementById("xian");
	//遍历所有的省
	for(var i=0;i<provinces.length;i++){
		// 查看该节点是否是元素节点
		if(provinces[i].nodeType==1){
			//创建option节点对象
			var shengopt=document.createElement("option");
			//为省节点添加文本节点
			shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
			//为省节点添加属性
			shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
			//添加省到页面dom中
			sheng.appendChild(shengopt);
		}
	}
	//当省节点发生改变时,触发事件
	sheng.onchange=function(){
	//获取省节点中所有的option对象集合
	var shengs=sheng.options;
	//获取选中的option对象的节点下标(selectedIndex)
	var num=shengs.selectedIndex;
	/*//清空市区
	shi.length=0;
	xian.length=0; */
	//根据选中的省的下标获取它的value值的内容,即xml文件中的postcode对应的值
	var  ppostcode=shengs[num].getAttribute("value");
	//遍历所有的省
	for(var i=0;i<provinces.length;i++){
		//查看该节点是否是元素节点
		if(provinces[i].nodeType==1){
			//获取provinces的postcode属性值
			var postcode=provinces[i].getAttribute("postcode");
			alert(postcode);
				//如果相同
				if(postcode==ppostcode){
					//获取选中省下的所有市的节点
					var cities=provinces[i].childNodes;
					//清空市
					shi.length=0;
					//遍历省下的所有市
					for(var i=0;i<cities.length;i++){
						//查看该节点是否是元素节点
						if(cities[i].nodeType==1){
							//创建option节点对象
							var shiopt=document.createElement("option");
							 //为其添加文本节点
							shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
							//为其设置value属性
							shiopt.setAttribute("value",cities[i].getAttribute("postcode"));
							//将option节点添加到市节点上
							shi.appendChild(shiopt);
						}
					}
					break;
				}
			}
		}
	}
	//当市节点发生改变时,触发的事件
	shi.onchange = function(){
	//获取市节点的所有option对象
 	var shis = shi.options;
 	//获取选中市的下标值
 	var num = shis.selectedIndex;   
 	//获取选中市的value值	  
 	var spostcode = shis[num].getAttribute("value");  
   //遍历所有的省
     for(var i=0;i<provinces.length;i++){
     	//查看该节点是否是元素节点
    	 if(provinces[i].nodeType==1){
    	 	//获取选中的省下的所有的市的集合
    		 var cities = provinces[i].childNodes;
    		 //遍历选中的省下的所有的市
    		 for(var j=0;j<cities.length;j++){
    		 	//查看该节点是否是元素节点
    			 if(cities[j].nodeType==1){
    			 	//获取cities的postcode属性值
    				 var postcode = cities[j].getAttribute("postcode");
    				 //如果相同
    				 if(postcode == spostcode){
    				 	////清空县
    					 xian.length=0;
    					 //获取选中市下的所有县的集合
    					 var areas = cities[j].childNodes;
    					 //遍历这些县
    					 for(var k=0;k<areas.length;k++){
    					 	//查看该节点是否是元素节点
    						 if(areas[k].nodeType == 1){
    						 	//创建option节点对象
    						   var xianopt = document.createElement("option");
    						   //为其添加文本节点
	    			           xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
	    			           //为其设置value属性
	                           xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
	                           //将option节点添加到县节点上
	    		               xian.appendChild(xianopt);
    						 }
    					 }
    					  break;
    				 }
    			 }
    		 }
    	 }
      }          
  }
	
}
//-->
/*
  备注说明:不能把 getxmlDom()方法中的代码放入到window.onload事件函数中
  因为在opera11.01版本中会出现xmlDom.async<window.onload的异常信息
   XMLHttpRequest to files is disabled for security reasons.
==> Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
 //为了支持opera11.01必须在服务器页面中访问.

  */
</script>
 
 

 

 

 /*
  备注说明:不能把 getXmlDoc()方法中的代码放入到window.onload事件函数中
  因为在opera11.01版本中会出现xmlDoc.async<window.onload的异常信息
   XMLHttpRequest to files is disabled for security reasons.
==> Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
 //为了支持opera11.01必须在服务器页面中访问.

 

注意:要想在opera浏览器中本地访问,要配置你的opera浏览器:

         首先,打开opera浏览器,在地址栏输入about:config

         然后进入:首选项编辑器===》User Prefs===》Allow File XMLHttpRequest选中保存,重启opera浏览器即可

  */
--------------------------------------

 

<?xml version="1.0" encoding="UTF-8"?>
<root name="中国">
 <province name="请选择省" postcode="100000" >
    <city name="请选择市" postcode="100100" >
   <area name="请选择区" postcode="100101" />
 </city>
  </province>
  <province name="北京市" postcode="110000" >
    <city name="市辖区" postcode="110100" >
        <area name="东城区" postcode="110101" />
        <area name="西城区" postcode="110102" />
        <area name="崇文区" postcode="110103" />
        <area name="宣武区" postcode="110104" />
        <area name="朝阳区" postcode="110105" />
        <area name="丰台区" postcode="110106" />
        <area name="石景山区" postcode="110107" />
        <area name="海淀区" postcode="110108" />
        <area name="门头沟区" postcode="110109" />
        <area name="房山区" postcode="110111" />
        <area name="通州区" postcode="110112" />
        <area name="顺义区" postcode="110113" />
        <area name="昌平区" postcode="110114" />
        <area name="大兴区" postcode="110115" />
        <area name="怀柔区" postcode="110116" />
        <area name="平谷区" postcode="110117" />
    </city>
    <city name="县" postcode="110200" >
        <area name="密云县" postcode="110228" />
        <area name="延庆县" postcode="110229" />
    </city>
  </province>
  <province name="天津市" postcode="120000" >
    <city name="市辖区" postcode="120100" >
        <area name="和平区" postcode="120101" />
        <area name="河东区" postcode="120102" />
        <area name="河西区" postcode="120103" />
        <area name="南开区" postcode="120104" />
        <area name="河北区" postcode="120105" />
        <area name="红桥区" postcode="120106" />
        <area name="塘沽区" postcode="120107" />
        <area name="汉沽区" postcode="120108" />
        <area name="大港区" postcode="120109" />
        <area name="东丽区" postcode="120110" />
        <area name="西青区" postcode="120111" />
        <area name="津南区" postcode="120112" />
        <area name="北辰区" postcode="120113" />
        <area name="武清区" postcode="120114" />
        <area name="宝坻区" postcode="120115" />
    </city>
    <city name="县" postcode="120200" >
        <area name="宁河县" postcode="120221" />
        <area name="静海县" postcode="120223" />
        <area name="蓟县" postcode="120225" />
    </city>
  </province>
       .

     .

   .

</root>

  

你可能感兴趣的:(xml,浏览器,css,Security,Opera)