依据XML用JS做级联操作
日期：2014-05-16 浏览次数：20389 次
所有代码都是在写在JS中。首先，解析XML 、然后把XML中的内容放进页面中的select选项里。
XML文件：
<?xml version="1.0" encoding="utf-8"?>
<cities>
<province name="北京">
<city>大兴</city>
<city>昌平</city>
<city>朝阳</city>
<city>海淀</city>
<city>东城</city>
<city>西城</city>
</province>
<province name="河北">
<city>石家庄</city>
<city>保定</city>
<city>邢台</city>
<city>张家口</city>
<city>廊坊</city>
<city>承德</city>
</province>
<province name="河南">
<city>郑州</city>
<city>安阳</city>
<city>平顶山</city>
<city>开封</city>
<city>商丘</city>
<city>洛阳</city>
</province>
<province name="东北">
<city>哈尔滨</city>
<city>辽宁</city>
<city>吉林</city>
<city>大连</city>
<city>铁岭</city>
<city>仕新</city>
</province>
</cities>
?
?
页面：
<body>
<h1>解析xml文件实现省市级联下拉菜单</h1>
<div>
<span>
<select id="province" name="province">
<option>请选择省</option>
</select>
</span>
<span>
<select id="cities" name="city">
<option>请选择相应省下面的市</option>
</select>
</span>
</div>
</body>
?
?
JS：
<script type="text/javascript">
window.onload = function(){
var xmlDom;
try {
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}
catch (err) {
try {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async = "false";
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDom.load("city.xml");
//获取xml文件的根节点
var root = xmlDom.documentElement;
//获取根节点下面的省节点
var provinces = root.childNodes;
var province = document.getElementById("province");
for (var i = 0; i < provinces.length; i++) {
//获取省节点的name属性的值
var name = provinces[i].getAttribute("name
