JS 读取XML设置级联菜单

cities.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
<script type="text/javascript" src="cities.js"></script>
</head>
<body>

<select id="province">
	<option value=""> 请选择 ...</option>
	<option value="河北省"> 河北省 </option>
	<option value="辽宁省"> 辽宁省 </option>
	<option value="山东省"> 山东省 </option>
</select>
<select id="city"><option value="..."> 请选择 ...</option></select>

</body>
</html>

cities.js

window.onload = function()
{
	// 解析 XML 文档 , 得到 xml 文档的 china 根节点
	var xmlDocument = parseXml("cities.xml");
	var chinaNode = xmlDocument.childNodes[1];
	// 为 id="province" 的 select 节点添加 onchange 事件 , 获取选择的省的 value
	var provinceNode = document.getElementById("province");
	provinceNode.onchange = function()
	{
		// ** 清空 provice 节点出 <option value="..."> 请选择 ...</option> 的所有子节点 **
		var cityNode = document.getElementById("city");
		// cityNodeOptionNodes 数组时活动的 , 所以需要从后向前清
		var cityNodeOptionNodes = cityNode.getElementsByTagName("option");
		var length = cityNodeOptionNodes.length;
		for(var i = length - 1; i > 0; i--)
		{
			cityNode.removeChild(cityNodeOptionNodes[i]);
		}
		var provinceValue = this.value;
		// 用 provinceValue 去 xml 文档中获取对应的 province 节点
		var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']");
		// 获取 3 provinceNodeInXmlFile 的所有 city 子节点的文本值 : cityValue
		var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city");
		for (var i = 0; i < cityNodesInXmlFile.length; i++)
		{
			var cityNodeInXmlFile = cityNodesInXmlFile[i];
			var cityValue = cityNodeInXmlFile.firstChild.nodeValue;
			// 利用 得到的文本值创建 option 节点 : <option value='cityValue'>cityValue</option>
			var optionNode = document.createElement("option");
			optionNode.setAttribute("value", cityValue);
			var optionNodeTextNode = document.createTextNode(cityValue);
			optionNode.appendChild(optionNodeTextNode);
			// 把创建好的 option 节点添加到 id="city" 的 select 节点中
			cityNode.appendChild(optionNode);
		}
	};
	// 解析 xml 文件的函数
	function parseXml(fileName)
	{
		//IE 内核的浏览器
		if (window.ActiveXObject)
		{
			// 创建 DOM 解析器
			var doc = new ActiveXObject("Microsoft.XMLDOM");
			doc.async = "false";
			// 加载 XML 文档 , 获取 XML 文档对象
			doc.load(fileName);
			return doc;
		}
		//Mozilla 浏览器
		else if (window.DOMParser)
		{
			// 创建 DOM 解析器
			var p = new DOMParser();
			// 创建 DOM 解析器
			return p.parseFromString(fileName, "text/xml");
		}
		else
		{
			return false;
		}
	}
}

cities.xml

<?xml version="1.0" encoding="GB2312"?>
<china>
	<province name="河北省">
		<city> 石家庄 </city>
		<city> 邯郸 </city>
		<city> 唐山 </city>
		<city> 张家口 </city>
		<city> 廊坊 </city>
	</province>
	<province name="辽宁省">
		<city> 沈阳 </city>
		<city> 大连 </city>
		<city> 鞍山 </city>
		<city> 抚顺 </city>
		<city> 铁岭 </city>
	</province>
	<province name="山东省">
		<city> 济南 </city>
		<city> 青岛 </city>
		<city> 威海 </city>
		<city> 烟台 </city>
		<city> 潍坊 </city>
	</province>
</china> 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值