js 读取 xml 的城市级联

最新推荐文章于 2019-12-23 10:36:43 发布

原创最新推荐文章于 2019-12-23 10:36:43 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#XML #Microsoft #Web

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript和XML实现的级联选择器，该选择器可以根据已选择的省份自动填充对应的城市和区域选项，并默认选中之前保存的选择。

朋友让我写了一个用js和xml的级联修改时显示已经选择的城市。做了一个指定参数的级联。页面js如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>New Web Project</title>
<script type="text/javascript" src="js/PCA_modify.js">
</script>
<script language="JavaScript">
function AddProvince1(pid, cid, aid){
xmldoc = new ActiveXObject("microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("js/PCAXml.xml");
var ProvinceNodes = xmldoc.documentElement.selectNodes("Province");//documentElement可以返回文档的根节点
for (var i = 0; i < ProvinceNodes.length; i++) {//循环所有的省
document.getElementById("province").options.add(new Option(ProvinceNodes[i].getAttribute("name"), ProvinceNodes[i].getAttribute("id")));
if (ProvinceNodes[i].getAttribute("id") == pid) {//选中已经选定的省
document.getElementById("province").options[i].selected = true;
};
};

var CityNodes = xmldoc.documentElement.selectNodes("Province[@id='" + pid + "']/City"); //获得已经选定省份下的所有市
for (var i = 0; i < CityNodes.length; i++) {
document.getElementById("city").options.add(new Option(CityNodes[i].getAttribute("name"), CityNodes[i].getAttribute("id")));
if (CityNodes[i].getAttribute("id") == cid) {//选中已经选定的市
document.getElementById("city").options[i].selected = true;
};
};

var AreaNodes = xmldoc.documentElement.selectNodes("Province/City[@id='" + cid + "']/Area");
alert(AreaNodes.length);
for (var i = 0; i < AreaNodes.length; i++) {
document.getElementById("area").options.add(new Option(AreaNodes[i].text, AreaNodes[i].getAttribute("id")));
if (AreaNodes[i].getAttribute("id") == aid) {//选中已经选定的区
document.getElementById("area").options[i].selected = true;
};
};
};
</script>
</head>
<body onload="AddProvince1('03','0302','030204');">
省
<select id="province" name="province" class="text70" onclick="AddCity(this.value)">
</select>
<br>
市
<select id="city" name="city" class="text70" onclick="AddArea(this.value)">
</select>
<br>
区
<select id="area" class="text40" name="area">
</select>
<br>
</body>
</html>