以前在项目中实现二级联动是通过单纯的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.f2er.com/xml/295770.html