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