用js和xml实现城市联动

最新推荐文章于 2021-05-26 06:30:03 发布

Francis_yxx

最新推荐文章于 2021-05-26 06:30:03 发布

阅读量463

点赞数 1

分类专栏： HTML JavaScript XHTML XML

本文链接：https://blog.csdn.net/yuxingxing198812/article/details/16945949

版权

JavaScript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

XHTML

3 篇文章 0 订阅

订阅专栏

用js和xml实现城市联动，目前只在ie8中运行过。还有些bug希望指出。


<script type="text/javascript">
 window.onload = function ()
 {
 	
	//得到省的select节点
 	var provences = document.getElementById("prvence");
	
	provences.onchange = function ()
	{
		var provenceName = this.value;
		
		var city = document.getElementById("city");			//删除city中的原有数据
		var citys = city.getElementsByTagName("option");    //在省的下拉框出现onchange的时候先清空city的下拉框的内容
		var lens = citys.length;
		for(var k=lens-1;k>=0;k--)
		{
			city.removeChild(citys[k]);
		}
		
		
		var xmlDoc = loadXML("cities.xml");            //加载xml文档，并获得xml文档对象
		var provence = xmlDoc.getElementsByTagName("provence");  
		var len = provence.length;         //省的节点一共有多少个
		var cities = new Array();
		for(var i=0;i<len;i++)//xml中省的节点
		{
			var provenceElements = provence[i];
			pro = provenceElements.getAttribute("name");
			
			if(provenceName==pro)
			{
				cities = provenceElements.getElementsByTagName("city");

			}
		}
		
		var optionies = new Array();
		for(var j=0;j<cities.length;j++)
		{
			optionies = document.createElement("option");
			optionies.innerText= cities[j].text;
			city.appendChild(optionies);
		}
		
		
	}
 }
 
 
 //加载xml文档

	var xmlDoc;
	function loadXML(fname) { 
			var xmlDoc; 
		try 
		{ 
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
		} catch (e) 
		{ 
			try { 
				xmlDoc = document.implementation.createDocument("", "", null); 
			} 
			catch (e) 
			{ 
				alert(e.message); 
			} 
		} 
		try
		{ 
			xmlDoc.async = false; 
			xmlDoc.load(fname);  
		} 
		catch (e) { 
		} 
		return xmlDoc; 
		} 

</script>

下面是整个代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现联动</title>
<!--当用户选择一个省时第二个下拉框出现相应省的市-->
<script type="text/javascript">
 window.onload = function ()
 {
 	
	//得到省的select节点
 	var provences = document.getElementById("prvence");
	
	provences.onchange = function ()
	{
		var provenceName = this.value;
		
		var city = document.getElementById("city");			//删除city中的原有数据
		var citys = city.getElementsByTagName("option");    //在省的下拉框出现onchange的时候先清空city的下拉框的内容
		var lens = citys.length;
		for(var k=lens-1;k>=0;k--)
		{
			city.removeChild(citys[k]);
		}
		
		
		var xmlDoc = loadXML("cities.xml");            //加载xml文档，并获得xml文档对象
		var provence = xmlDoc.getElementsByTagName("provence");  
		var len = provence.length;         //省的节点一共有多少个
		var cities = new Array();
		for(var i=0;i<len;i++)//xml中省的节点
		{
			var provenceElements = provence[i];
			pro = provenceElements.getAttribute("name");
			
			if(provenceName==pro)
			{
				cities = provenceElements.getElementsByTagName("city");

			}
		}
		
		var optionies = new Array();
		for(var j=0;j<cities.length;j++)
		{
			optionies = document.createElement("option");
			optionies.innerText= cities[j].text;
			city.appendChild(optionies);
		}
		
		
	}
 }
 
 
 //加载xml文档

	var xmlDoc;
	function loadXML(fname) { 
			var xmlDoc; 
		try 
		{ 
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
		} catch (e) 
		{ 
			try { 
				xmlDoc = document.implementation.createDocument("", "", null); 
			} 
			catch (e) 
			{ 
				alert(e.message); 
			} 
		} 
		try
		{ 
			xmlDoc.async = false; 
			xmlDoc.load(fname);  
		} 
		catch (e) { 
		} 
		return xmlDoc; 
		} 

</script>
</head>

<body>

	<select id="prvence">
    	<option>----请选择----</option>
    	<option value="北京市">北京市</option>
        <option value="湖南省">湖南省</option>
        <option value="黑龙江">黑龙江</option>
        <option value="广东省">广东省</option>
    </select>
    
    <select id="city">
    	<option>----请选择----</option>
    </select>
   
	
</body>
</html>

还有一个xml文档

<?xml version="1.0" encoding="utf-8"?>
<china>
	<provence name="湖南省">
		<city>长沙</city>
		<city>常德</city>
		<city>沈阳</city>
		<city>邵阳</city>
	</provence>
	<provence name="北京市">
		<city>昌平</city>
		<city>海淀</city>
		<city>朝阳</city>
		<city>西城</city>
	</provence>
	<provence name="黑龙江">
		<city>漯河</city>
		<city>黑河</city>
	</provence>
	<provence name="广东省">
		<city>广州</city>
		<city>东莞</city>
		
	</provence>


</china>

js城市联动.rar (1.6 KB)
下载次数: 25

Francis_yxx

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js和xml实现城市联动

用js和xml实现城市联动，目前只在ie8中运行过。还有些bug希望指出。 window.onload = function () { //得到省的select节点 var provences = document.getElementById("prvence"); provences.onchange = function () { var
复制链接

扫一扫