JSDom加载解析XML文件——下拉列表二级联动篇

最新推荐文章于 2024-05-12 05:47:31 发布

weixin_33795743

最新推荐文章于 2024-05-12 05:47:31 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/H_Razor/archive/2011/03/21/1990527.html

本文介绍了一种使用JS和XML实现省市二级联动的方法，通过解析XML文件中的省份和城市信息，动态生成下拉选择框。具体步骤包括加载XML文件、解析省份信息、添加省份选项、监听省份变化并更新城市选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前在项目中实现二级联动是通过单纯的JS方法，在对JS的深度了解中发现通过JSDom加载写好的XML文件也可以实现二级联动，这也不失为一种好的方法，下面就跟大家分享一下。

首先，我们来看下要呈现的效果：

好，我们来看下需要的一个简单的XML文件：

我们可以看到该XML文档有三层：

根节点：cities

子节点：province

子节点：city

Province节点拥有一个Name属性

下面我们来看下JS的源码：

1 window.onload = function (){
2
3 //创建微软XML解析控件对象
4
5 var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
6
7 //获得省的选择框对象节点
8
9 var province = document.getElementById("province");
10
11 //获得市的选择框对象节点
12
13 var city = document.getElementById("city");
14
15 //设置异步关闭
16
17 xmlDoc.async = "false";
18
19 //加载XML文件
20
21 xmlDoc.load("cities.xml");
22
23 //获得XML文件标签名为province的对象节点
24
25 var txt = xmlDoc.getElementsByTagName("province");
26
27 //使用循环将获得的省的名称加入province的选择框中
28
29 for(var i=0;i<txt.length;i++){
30
31 //获得province标签属性名
32
33 var name = txt[i].getAttribute("name");
34
35 //创建option节点对象
36
37 var p = document.createElement("option");
38
39 //将文本节点添加到option对象中
40
41 p.appendChild(document.createTextNode(name));
42
43 //将对象添加到省选择框的对象节点中
44
45 province.appendChild(p);
46
47 }
48
49 //当province文本框中的值发生改变时触发以下事件
50
51 province.onchange = function (){
52
53 //获得省的所有选项
54
55 var prces = province.options;
56
57 //获得选中选项
58
59 var selected = prces[prces.selectedIndex];
60
61 //获得选中项的文本值
62
63 var sedname = selected.innerHTML;
64
65
66
67
68
69 /*循环添加省的子城市到city选择框*/
70
71 for(var i=0;i<txt.length;i++){
72
73 //获得XML文档中省的name
74
75 var name = txt[i].getAttribute("name");
76
77 //判断选中选项的省是否与XML文档中提取到得省的name是否相同
78
79 if(sedname==name){
80
81 //在联动之前设置其中选项长度，为了使请选择选项始终显示所以长度设置为1
82
83 /*注意：这里只是设置了下拉选择框的长度，等同于把其中的固定下标的元素隐藏，并不等同于删除其中的元素*/
84
85 city.length=1;
86
87 //获得其中省的节点
88
89 var cities = txt[i];
90
91 //获得省的节点的子节点、也就是省内的城市
92
93 var cy = cities.childNodes;
94
95 /*循环添加城市节点*/
96
97 for(var j=0;j<cy.length;j++){
98
99 //创建option元素节点
100
101 var nopt = document.createElement("option");
102
103 //将获得的城市节点的文本添加到该元素节点中
104
105 nopt.appendChild(document.createTextNode(cy[j].childNodes[0].nodeValue));
106
107 //添加到下拉框节点中
108
109 city.appendChild(nopt);
110
111 }
112
113 }
114
115 }
116
117 }
118
119 }

HTML源码:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>省市联动</title>
6 </head>
7
8 <body>
9 <select id="province" style="width:100px; background:#CCC;">
10 <option>--请选择省--</option>
11 </select>
12 <select id="city" style="width:100px; background:#CCC;">
13 <option>--请选择市--</option>
14 </select>
15 </body>
16 <script type="text/javascript" src="city.js">
17
18 </script>
19 </html>

注意：这段js脚本代码仅支持IE浏览器（本人使用IE9测试），还有其中的XML加载路径，我的是默认在本站也就是同一个文件夹内；

此外，当再次点击“请选择省“这个选项时，右侧市的选择框会停留在你上一次点击的省的下属市上不会做改变，这也算一个小小的bug吧，大家见谅，有解决的请回复我。

转载于:https://www.cnblogs.com/H_Razor/archive/2011/03/21/1990527.html