怎样实现二级联动

原创 2013年12月02日 20:51:31

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>


相关文章推荐

js中的二级联动技术的实现

在web开发中我们经常会遇到页面的一个二级联动技术,二级联动字面解释就是说我在选择一级select不同的option,下面的二级option的属性值在进行相应的变动。        下面我先简述一下其...

使用angularjs实现二级联动需要注意的问题如下

实在是不能对jquery的ajax方法和基于页面dom的各种取值、传值方法满意(虽然jquery已经解救过我一次了),刚好手上这个项目用jquery的方法写了一半,决定试试很久以前自学的angular...

使用ajax实现二级联动

首先想要实现的二级联动效果,页面加载时从数据库调取省份的名字,并显示在jsp页面上,改变省份时后面出现该省对应的城市; 第一步,页面加载时,省份名字显示,首先是使用jdbc连接技术,从数据库查询...

vue学习之mintui picker选择器实现省市二级联动

picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker 代码如下: ...

访问Access数据库实现DropDownList二级异步联动(ASP.NET WebForm开发方式)

访问Access数据库实现DropDownList二级异步联动(ASP.NET WebForm开发方式)
  • anbuhay
  • anbuhay
  • 2015年03月21日 20:08
  • 417

angular中使用multiselect实现二级下拉联动

在angular中用到了bootstrap-multiselect下拉插件,实现二级联动的效果: 1)引入插件: 2)html下拉框: One Two Thr...

JSON实现市区二级联动

1-----Option----------------------------------------------------------------------------------------...

js实现二级联动菜单

下面是一段js实现二级联动菜单的代码,供初学者使用。文件名:index.html,代码如下 ...

初学ajax,实现用户名重复提示、二级/三级联动下拉框

初学ajax,实现异步操作! 源代码下载链接:http://download.csdn.net/detail/yan13507001470/9911744                 以下...

javascript实现二级联动下拉框

这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框。  1 DOCT...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:怎样实现二级联动
举报原因:
原因补充:

(最多只允许输入30个字)