JavaScript省市二级联动

最新推荐文章于 2018-04-08 17:10:57 发布

什码情况

最新推荐文章于 2018-04-08 17:10:57 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/user_longling/article/details/38497925

【JavaScript】专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何利用HTML和JavaScript解析XML文件，并将其数据动态显示在页面上，以实现城市信息的二级联动展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XML文件负责保存所需要的数据，而HTML文件负责通过javascript解析XML数据并显示在页面上。代码如下：

cities.xml

<?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>
	</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>
		<city>鄂州</city>
		<city>黄冈</city>
	</province>
</china>

city.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>二级联动</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
    <select id="province" >
    	<option>--请选择--</option>
    	<option value="湖北省">湖北省</option>
    	<option value="吉林省">吉林省</option>
    	<option value="辽宁省">辽宁省</option>
    	<option value="山东省">山东省</option>
    </select>
	
	<select id="city">
		<option>--请选择--</option>
	</select>
  </body>
  <script type="text/javascript">
  	document.getElementById("province").onchange=function(){
		//当前选中的省
		var provinceValue=this.value;	
		var cityNode=document.getElementById("city");
		
		//删除市下拉列表中的前一个省的城市项
		var cityOptions=cityNode.getElementsByTagName("option");
		for(var i=cityOptions.length-1;i>0;i--){
			cityNode.removeChild(cityOptions[i]);
		}
		
		
		var xmlDoc=parseXML("cities.xml");
		var xmlProvinceElements=xmlDoc.getElementsByTagName("province");
		
		//下拉列表中添加选中省的城市项	
		for(var i=0;i<xmlProvinceElements.length;i++){
			if(xmlProvinceElements[i].getAttribute("name")==provinceValue){
				var xmlCityElements=xmlProvinceElements[i].getElementsByTagName("city");
				for(var j=0;j<xmlCityElements.length;j++){
					var xmlCityName=xmlCityElements[j].firstChild.nodeValue;	
					var cityOptionElement=document.createElement("option");
					cityOptionElement.setAttribute("value",xmlCityName);
					cityOptionElement.appendChild(document.createTextNode(xmlCityName));
					cityNode.appendChild(cityOptionElement);
				}
				break;
			}
		}
		
	}
	
	
	/*
	 * 加载XML文件
	 * @param {Object} filename
	 */
	function parseXML(filename){
		try{		//Internet Explorer  创建一个空的xml文档
			xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		}catch(e){	// Firefox,Mozilla,Opera....
			try {
				xmlDoc=document.implementation.createsDocument("","",null);
			}catch(e){}
		}
		//关闭异步加载
		xmlDoc.async=false;
		//加载XML文档
		xmlDoc.load(filename);
		return xmlDoc;
	}
  </script>
</html>