关闭

怎样实现二级联动

943人阅读 评论(0) 收藏 举报
分类:

china.xml文档


<?xml version="1.0" encoding="UTF-8"?>
<china>
	<province name="河南省">
		<city>郑州</city>
		<city>洛阳</city>
		<city>安阳</city>
	</province>
	<province name="河北省">
		<city>石家庄</city>
		<city>邯郸</city>
		<city>张家口</city>
	</province>
	<province name="天津">
		<city>和平区</city>
		<city>北辰区</city>
		<city>河西区</city>
	</province>
</china>

c.html
<!DOCTYPE html>
<html>
<head>
<title>c.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
	var xmlDocument = null;
	var provinces = null;
	var domSelectcities = null;
	window.onload = function() {

		xmlDocument = parseXML("china.xml");

		provinces = xmlDocument.getElementsByTagName("province");

		//获取省select对应的dom对象
		var domSelectPro = document.getElementById("pro");
		domSelectcities = document.getElementById("city");

		for ( var i = 0; i < provinces.length; i++) {
			var xmlPro = provinces[i];
			//<option>xxxxx</option>
			var newChild = document.createElement("option");
			//xxxxx
			var newTxt = document.createTextNode(xmlPro.getAttribute("name"));
			//把xxxxx添加到option
			newChild.appendChild(newTxt);
			//把option添加到select
			domSelectPro.appendChild(newChild);
		}

		//注册事件
		domSelectPro.onchange = onSelectProcg;

	};

	var onSelectProcg = function() {
	    //清空html select 中city
	   // domSelectcities.childNodes.length=0; //思考以下  请参看redarmy_chen
	   //第一种:domSelectcities.length=0;
	   //第二种:
	   var cnodes=domSelectcities.childNodes;
	   for(var r=0;r<cnodes.length;){
		   domSelectcities.removeChild(cnodes[0]);
	   }
	    
		//遍历xml所有的省
		for ( var i = 0; i < provinces.length; i++) {
			//得到xml文件中具体的某个省
			var xmlPro = provinces[i];
			//判断当前省市xml文件中的那个省
			if (this.value == xmlPro.getAttribute("name")) {
				//解析出xml文件省下面对应的city
				var xmlCities = xmlPro.getElementsByTagName("city");
				for ( var k = 0; k < xmlCities.length; k++) {
					//<option>河西区</option>
					var newChild = document.createElement("option");
					//河西区
					var newTxt = document.createTextNode(xmlCities[k].firstChild.nodeValue);
					//把xxxxx添加到option
					newChild.appendChild(newTxt);
					//把option添加到select

					domSelectcities.appendChild(newChild);
				}
			}
		}
	};

	function parseXML(filename) {
		var xmlDoc; //document对象
		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;
		//解析器加载名为 "xxx.xml" 的 XML 文档、
		xmlDoc.load(filename);
		return xmlDoc;
	}
</script>
</head>

<body>
	<div align="center">
		<h3>二级联动</h3>

		<select id="pro">
			<option>请选择省市</option>

		</select> <select id="city">
			<option>请选择市</option>
		</select>
	</div>
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:90524次
    • 积分:1653
    • 等级:
    • 排名:千里之外
    • 原创:84篇
    • 转载:10篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论