JS实现从XML中获取省份和城市信息_二级联动

最新推荐文章于 2017-11-07 13:19:17 发布

执念ID

最新推荐文章于 2017-11-07 13:19:17 发布

阅读量1k

点赞数

分类专栏： HTML Java编程思想文章标签：二级联动XML

本文链接：https://blog.csdn.net/u012117710/article/details/75017016

版权

Java编程思想同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

//工具util.js实现，固定代码function loadXMLDoc(dname) {
	try // Internet Explorer
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	} catch (e) {
		try // Firefox, Mozilla, Opera, etc.
		{
			xmlDoc = document.implementation.createDocument("", "", null);
		} catch (e) {
			alert(e.message)
		}
	}
	try {
		xmlDoc.async = false;
		xmlDoc.load(dname);//加载xml文档
		return (xmlDoc);
	} catch (e) {
		alert(e.message)
	}
	return (null);
}



//HTML页面实现部分
<html>
<head>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/util.js"></script>
</head>

<body>
	<form action="" method="post">
		<table boder="1" width="438">
			<tr>
				<td>所在地（省、市）：</td>
				<td>
				<select name="province" id="province"></select> 
				<select name="city" id="city" ></select>
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
	//从XML中读取文件
	//页面加载完毕就要把省份读进去
	window.onload = function(){
	var stateSelectObj = document.getElementById("province");
	var citySelectObj = document.getElementById("city");
	//初始化：请选择
	stateSelectObj.add(new Option("---请选择---",""));
	citySelectObj.add(new Option("---请选择---",""));
	//从xml中读取所有的省份，给stateSelect赋值
	var xmlDoc = loadXMLDoc("LocList.xml");
	var xmlStateNodes = xmlDoc.getElementsByTagName("State");
	//遍历所有的省份
	for(var i=0;i<xmlStateNodes.length;i++){
		var xmlStateName = xmlStateNodes[i].getAttribute("Name");
		stateSelectObj.add(new Option(xmlStateName,xmlStateName));
	}
	//给省份select注册onchaange按钮
	stateSelectObj.οnchange=function(){
	//清空citySelectObj内容并初始化：请选择
	citySelectObj.length=0;
	citySelectObj.add(new Option("---请选择---",""));
	if(this.value!=""){
		for(var i=0;i<xmlStateNodes.length;i++){
			var xmlStateName = xmlStateNodes[i].getAttribute("Name");
			if(this.value==xmlStateName){
				//调用该标签的getElementsByTagName方法，找到子标签
				var xmlCityNodes = xmlStateNodes[i].getElementsByTagName("City");
				for(var i=0;i<xmlCityNodes.length;i++){
					var xmlCityName = xmlCityNodes[i].getAttribute("Name");
					citySelectObj.add(new Option(xmlCityName,xmlCityName));
				}
			}
		}
	}
		
	}
	}
	
	</script>

</body>
</html>
XML文件内容固定，在网上找的较全！基本格式如下：
<?xml version="1.0" encoding="UTF-8"?>
<Location>
    <State Name="北京" Code="11">
      <City Name="东城" Code="1" />
      <City Name="西城" Code="2" />
      <City Name="朝阳" Code="5" />
      <City Name="丰台" Code="6" />
      <City Name="石景山" Code="7" />
      <City Name="海淀" Code="8" />
      <City Name="门头沟" Code="9" />
      <City Name="房山" Code="11" />
      <City Name="通州" Code="12" />
      <City Name="顺义" Code="13" />
      <City Name="昌平" Code="21" />
      <City Name="大兴" Code="24" />
      <City Name="平谷" Code="26" />
      <City Name="怀柔" Code="27" />
      <City Name="密云" Code="28" />
      <City Name="延庆" Code="29" />
    </State>

执念ID

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS实现从XML中获取省份和城市信息_二级联动

//工具util.js实现，固定代码function loadXMLDoc(dname) { try // Internet Explorer { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try // Firefox, Mozilla, Opera, etc. { xmlDoc = docu
复制链接

扫一扫

专栏目录