这篇文章主要介绍了 javascript 解析 xml 实现省市县三级联动的方法, 涉及 javascript 针对节点的操作与 XML 文件解析的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript 解析 xml 实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下:
(该方法适用于任何常用浏览器)
- <body>
- <div>
- <span>
- <select id="sheng" style="width: 100px">
- </select>
- </span>
- <span>
- <select id="shi" style="width: 100px">
- </select>
- </span>
- <span>
- <select id="xian" style="width: 100px">
- </select>
- </span>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- < !--
- function getXmlDoc() {
- var xmlDoc;
- try {
- //给IE浏览器 创建一个空的微软 XML文档对象
- xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
- } catch(err) {
- try {
- //在 Firefox及其他浏览器(opera)中的 XML解析器创建一个空的 XML文档对象。
- xmlDoc = document.implementation.createDocument("", "", null);
- } catch(er) {
- alert("所使用的浏览器版本太低了,该换更新了");
- }
- }
- //关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
- xmlDoc.async = false;
- //解析器加载名为 "xxx.xml" 的 XML 文档
- xmlDoc.load("city.xml");
- return xmlDoc;
- }
- window.onload = function() {
- var xmlDoc = getXmlDoc();
- //获取xml文件的根节点
- var root = xmlDoc.documentElement;
- //获取xml文件的根节点下面的省节点
- var provinces = root.childNodes;
- //获取页面中要显示的省、市和县的控件dom对象
- var sheng = document.getElementById("sheng");
- var shi = document.getElementById("shi");
- var xian = document.getElementById("xian");
- //遍历所有的省
- for (var i = 0; i < provinces.length; i++) {
- //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性 问 题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
- if (provinces[i].nodeType == 1) {
- //创建一个option节点对象
- var shengopt = document.createElement("option");
- //为option省节点添加文本 shengopt.appendChild(document.createTextNode(provinces[i].getAttr ibute("name")));
- //为option省节点设置属性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode "));
- //添加省到页面dom对象中
- sheng.appendChild(shengopt);
- }
- }
- //当省节点发生改变时 触发事件
- sheng.onchange = function() {
- //获取省节点所有的option对象的集合
- var shengs = sheng.options;
- //获取选中option对象的selectedIndex(下标值)
- var num = shengs.selectedIndex;
- //清空市 区
- shi.length = 0;
- xian.length = 0;
- //根据选中的省获取其value值的内容 即xml文件中的postcode对应的 值
- var ppostcode = shengs[num].getAttribute("value");
- //遍历所有的省
- for (var i = 0; i < provinces.length; i++) {
- //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点)
- if (provinces[i].nodeType == 1) {
- //根据省获取其postcode值的内容 即html文件中的value对应 的值
- var postcode = provinces[i].getAttribute("postcode");
- if (postcode == ppostcode) {
- //获取省节点的子节点
- var cities = provinces[i].childNodes;
- //清空
- shi.length = 0;
- //遍历所有的市
- for (var i = 0; i < cities.length; i++) {
- //查看该节点是否是元素节点 也是为了实现不同浏览 器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
- if (cities[i].nodeType == 1) {
- //创建一个option节点对象
- var shiopt = document.createElement("option");
- //为option市节点添加文本 shiopt.appendChild(document.createTextNode(cities[i].getAttribute ("name")));
- //为option市节点设置属性
- shiopt.setAttribute("value", cities[i].getAttribute("postcode"));
- //添加市到页面dom对象中
- shi.appendChild(shiopt);
- }
- }
- break;
- }
- }
- }
- }
- //当市节点发生改变时 触发事件
- shi.onchange = function() {
- //获取市节点所有的option对象的集合
- var shis = shi.options;
- //获取选中option对象的selectedIndex(下标值)
- var num = shis.selectedIndex;
- //根据选中的市获取其value值的内容 即xml文件中的postcode对应的 值
- var spostcode = shis[num].getAttribute("value");
- //遍历所有的省
- for (var i = 0; i < provinces.length; i++) {
- //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼 容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素 节点)
- if (provinces[i].nodeType == 1) {
- //获取省节点的子节点
- var cities = provinces[i].childNodes;
- //遍历所有的市
- for (var j = 0; j < cities.length; j++) {
- //查看该节点是否是元素节点 也是为了实现不同浏览器之 间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
- if (cities[j].nodeType == 1) {
- //根据市获取其postcode值的内容 即html文件中的 value对应的值
- var postcode = cities[j].getAttribute("postcode");
- if (postcode == spostcode) {
- //清空
- xian.length = 0;
- //获取市节点的子节点
- var areas = cities[j].childNodes;
- //遍历所有的区(县)
- for (var k = 0; k < areas.length; k++) {
- //查看该节点是否是元素节点 也是为了实现不 同浏览器之间的兼容性问题(1是元素节点 Node.ELEMENT_NODE ---1 -- 元素节点)
- if (areas[k].nodeType == 1) {
- //创建一个option节点对象
- var xianopt = document.createElement("option");
- //为option区节点添加文本
- xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
- //为option区节点设置属性
- xianopt.setAttribute("value", areas[k].getAttribute("postcode"));
- //添加区到页面dom对象中
- xian.appendChild(xianopt);
- }
- }
- break;
- }
- }
- }
- }
- }
- }
- }
- //-->
- </script>
Xml 文件(简写版)
- <root name="中国">
- <province name="请选择省" postcode="100000" >
- <city name="请选择市" postcode="100100" >
- <area name="请选择区" postcode="100101" />
- </city>
- </province>
- <province name="北京市" postcode="110000" >
- <city name="市辖区" postcode="110100" >
- <area name="东城区" postcode="110101" />
- <area name="西城区" postcode="110102" />
- <area name="崇文区" postcode="110103" />
- <area name="宣武区" postcode="110104" />
- <area name="朝阳区" postcode="110105" />
- <area name="丰台区" postcode="110106" />
- <area name="石景山区" postcode="110107" />
- <area name="海淀区" postcode="110108" />
- <area name="门头沟区" postcode="110109" />
- <area name="房山区" postcode="110111" />
- <area name="通州区" postcode="110112" />
- <area name="顺义区" postcode="110113" />
- <area name="昌平区" postcode="110114" />
- <area name="大兴区" postcode="110115" />
- <area name="怀柔区" postcode="110116" />
- <area name="平谷区" postcode="110117" />
- </city>
- <city name="县" postcode="110200" >
- <area name="密云县" postcode="110228" />
- <area name="延庆县" postcode="110229" />
- </city>
- </province>
- </root>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: