用js跟xml实现城市联动-JavaSript-爱易网页

用js跟xml实现城市联动

日期：2014-05-16　浏览次数：20433 次

用js和xml实现城市联动
用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>----请选择----<

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用js跟xml实现城市联动

相关资料更多>

推荐阅读更多>