js三级联动

最新推荐文章于 2024-04-26 20:21:12 发布

dacainiao007

最新推荐文章于 2024-04-26 20:21:12 发布

阅读量2.6k

点赞数

文章标签： function mozilla null encoding xml html

本文链接：https://blog.csdn.net/dacainiao007/article/details/7861996

版权

JavaWeb 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<?xml version="1.0" encoding="GB2312"?>
<china>
	<province name="吉林省">
		<city>长春</city>
		<city>吉林市</city>
		<city>四平</city>
		<city>松原</city>
		<city>通化</city>
	</province>
	<province name="辽宁省">
		<city>沈阳</city>
		<city>大连</city>
		<city>鞍山</city>
		<city>抚顺</city>
		<city>铁岭</city>
	</province>
	<province name="山东省">
		<city>济南</city>
		<city>青岛</city>
		<city>威海</city>
		<city>烟台</city>
		<city>潍坊</city>
	</province>
</china>	





<!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 language="JavaScript">
	window.οnlοad=function(){
	   document.getElementById("province").οnchange=function(){
	   	   /*
	   	    *  <option value="吉林省">吉林省</option>
	   	    *  标签中 value="吉林省"的值
	   	    */
		   var provinceValue=this.value;
		   
		   var cityElement=document.getElementById("city");
/******************************************************************************************************************/		   
//删除city下拉选的内容
			/*
			 *  <select id="city" name="city">
				 	<option value="">请选择.....</option>
				 </select>
			 */
         	var optionCityElements=cityElement.getElementsByTagName("option");   
			
			//从后往前删
			for(var i=optionCityElements.length-1;i>0;i--){
				cityElement.removeChild(optionCityElements[i]);
			}
		   	   
/******************************************************************************************************************/		   
		   //声明省的元素
		   var provinceElement=null;
/**************************************************************************************************************/		   
//从xml文件中获取对应的省的元素	  
	       var xmlDoc=parseXml("cities.xml");
		   
		   //<province name="吉林省">
	       var provinceXmlElements=xmlDoc.getElementsByTagName("province");
		   for(var i=0;i<provinceXmlElements.length;i++){
		   	    var provinceXmlElement=provinceXmlElements[i];
				
				//获取<province name="吉林省">属性的值
				var provinceXmlElementNameValue=provinceXmlElement.getAttribute("name");
				
				//标签中 value="吉林省"的值和xml文件中<province name="吉林省">name属性的值比较
				if (provinceValue == provinceXmlElementNameValue) {
				    //如相同找到保存
					provinceElement=provinceXmlElement;
					break;
				}
		   }
/**************************************************************************************************************/	
       if(provinceElement!=null){
		   	/*
		   	 * <province name="辽宁省">
					<city>沈阳</city>
					<city>大连</city>
					<city>鞍山</city>
					<city>抚顺</city>
					<city>铁岭</city>
				</province>
		   	*/
		   var cityXmlElements=provinceElement.getElementsByTagName("city");
		   //alert(cityXmlElements.length);
		   //遍历
		   for(var i=0;i<cityXmlElements.length;i++){
		   	  //<city>沈阳</city>
		   	  var cityXmlValue=cityXmlElements[i].firstChild.nodeValue;
			  //alert(cityXmlValue);
			  
			  //创建<option value="四平">四平</option>
	          var optionElement=document.createElement("option");
			  optionElement.setAttribute("value",cityXmlValue);
			  var textElement=document.createTextNode(cityXmlValue);
			  optionElement.appendChild(textElement);
			  
			
			  /*
			   * 添加到 <select id="city" name="city">
			   * 	      <option value="">请选择.....</option>
	                  </select>
			   */
			 cityElement.appendChild(optionElement);
			
		   } 
	   }
	   }
	}
	
	function parseXml(fileName){
	   var xmlDoc=null;
	   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;
		 //解析器加载名为 "cities.xml" 的 XML 文档
         xmlDoc.load(fileName);
		 return xmlDoc;
	 }
	
</script>
</html>