用js和xml实现城市联动 -

yuxingxing1988

浏览: 56008 次
性别:
来自: 北京

最近访客更多访客>>

yangger1

lvc2103

yuan0166

我的无奈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用js和xml实现城市联动

XML JavaScript XHTML HTML

用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>