功能
省份城市二级联动【js+DOM+XML】实现
效果展示
代码实现
显示页面
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>省份城市二级联动</title>
5
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6
</head>
7
<!-- 页面加载之后，加载省份到省份下拉框中 -->
8
<body onload="getProvinces();">
9
<!-- 给省份下拉框添加onchange事件，获取不同省份对应的城市 -->
10
<select id="province" name="province" onchange="getCities(this);">
11
<option value="">请选择省份</option>
12
</select>
13
<select id="city" name="city">
14
<option value="">请选择城市</option>
15
</select>
16
<script type="text/javascript">
17
/*
18
加载所有的省份
19
*/
20
function getProvinces(){
21
//获取id为province的select元素节点
22
var provinceSelectNode = document.getElementById("province");
23
//调用自定义xml解析函数，加载xml文件
24
var xmlDoc = parseXML("provinces.xml");
25
//获取xml文件中，province元素节点
26
var xmlProvince_nodes = xmlDoc.getElementsByTagName("province");
27
if(xmlProvince_nodes != null){
28
//遍历provice元素节点集合
29
for(var i=0; i<xmlProvince_nodes.length; i++){
30
//当前province元素节点下的文本节点
31
var provinceText_node = xmlProvince_nodes[i].firstChild;
32
//获取province元素节点下的文本值
33
var provinceName = provinceText_node.nodeValue;
34
//创建option，设置元素的属性和文本
35
var option_node = document.createElement("option");
36
option_node.setAttribute("value", provinceName);
37
var text_node = document.createTextNode(provinceName);
38
//把文本对象追加到新建的option节点下
39
option_node.appendChild(text_node);
40
//把新建的option追加到id为province的select元素下面
41
provinceSelectNode.appendChild(option_node);
42
43
}
44
}
45
46
}
47
48
/*
49
函数：获取省份对应的城市
50
参数：传入的下拉框select节点对象
51
*/
52
function getCities(thisNode){
53
//获取id为city的select元素节点
54
var citySelectNode = document.getElementById("city");
55
//获取下面所有的option节点(除了<option value="">请选择.....</option>这个不删除)，所以下面的索引从1开始
56
var cityOptionNodes = citySelectNode.getElementsByTagName("option");
57
for(var i=1; i<cityOptionNodes.length; i++){
58
//清空下面的所有option节点
59
citySelectNode.removeChild(cityOptionNodes[i]);
60
i--;//这里写这个的原因是JavaScript中数组的长度是可变的。所以上次每次removeChild为第一个索引0
61
}
62
//调用自定义xml解析函数，加载xml文件
63
var xmlDoc = parseXML("cities.xml");
64
//获取select中被选中的option的值
65
var selectedProvince = thisNode.value;
66
//用户保存xml中对应的province元素节点
67
var xmlMachProvince_node;
68
//获取xml文件中，province元素节点
69
var xmlProvince_nodes = xmlDoc.getElementsByTagName("province");
70
//遍历xmlProvince_nodes元素节点，如果该节点name属性的值为当前select被选中的option的值
71
for(var i=0; i<xmlProvince_nodes.length; i++){
72
//获取当前xml中province元素节点
73
var xmlProvince_node = xmlProvince_nodes[i];
74
//获取其name属性值
75
var name = xmlProvince_node.getAttribute("name");
76
if(selectedProvince == name){//select中被选中的option的值和当前xml中province元素节点中name属性值一样
77
xmlMachProvince_node = xmlProvince_node;//获得了xml中name属性值对应的province元素节点
78
break;
79
}
80
}
81
if(xmlMachProvince_node != null){
82
//遍历该province节点下面的所有city元素节点
83
var city_nodes = xmlMachProvince_node.getElementsByTagName("city");
84
//遍历city元素节点集合
85
for(var i=0; i<city_nodes.length; i++){
86
//当前city元素节点下的文本节点
87
var cityText_node = city_nodes[i].firstChild;
88
//获取city元素节点下的文本值
89
var cityName = cityText_node.nodeValue;
90
//创建option，设置元素的属性和文本
91
var option_node = document.createElement("option");
92
option_node.setAttribute("value", cityName);
93
var text_node = document.createTextNode(cityName);
94
//把文本对象追加到新建的option节点下
95
option_node.appendChild(text_node);
96
//把新建的option追加到id为city的select元素下面
97
citySelectNode.appendChild(option_node);
98
99
}
100
}
101
102
}
103
104
/*
105
跨浏览器加载xml文档的函数，传入参数：xml文档名（xxxx.xml），返回xmlDoc对象
106
*/
107
function parseXML(xmlDocName)
108
{
109
var xmlDoc;
110
try{ //Internet Explorer 针对IE浏览器创建一个空的微软 XML 文档对象。
111
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
112
}catch(e){
113
try{ //Firefox, Mozilla, Opera, etc. 针对火狐已经其它浏览器创建一个空的 XML 文档对象。
114
xmlDoc=document.implementation.createDocument("","",null);
115
}catch(e){
116
alert(e.message);
117
return;
118
}
119
}
120
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
121
xmlDoc.async=false;
122
xmlDoc.load(xmlDocName);//解析器加载名为 "xxx.xml" 的 XML 文档
123
return xmlDoc;
124
}
125
126
</script>
127
</body>
128
</html>
cities.xml文件
1
<?xml version="1.0" encoding="utf-8"?>
2
<china>
3
<province name="湖北省">
4
<city>武汉</city>
5
<city>黄冈</city>
6
<city>鄂州</city>
7
<city>荆州</city>
8
<city>仙桃</city>
9
<city>随州</city>
10
<city>荆门</city>
11
<city>黄石</city>
12
</province>
13
<province name="吉林省">
14
<city>长春</city>
15
<city>吉林市</city>
16
<city>四平</city>
17
<city>松原</city>
18
<city>通化</city>
19
</province>
20
<province name="辽宁省">
21
<city>沈阳</city>
22
<city>大连</city>
23
<city>鞍山</city>
24
<city>抚顺</city>
25
<city>铁岭</city>
26
</province>
27
<province name="山东省">
28
<city>济南</city>
29
<city>青岛</city>
30
<city>威海</city>
31
<city>烟台</city>
32
<city>潍坊</city>
33
</province>
34
</china>
provinces.xml文件
1
<?xml version="1.0" encoding="utf-8"?>
2
<china>
3
<province>湖北省</province>
4
<province>吉林省</province>
5
<province>辽宁省</province>
6
<province>山东省</province>
7
<province>贵州省</province>
8
</china>
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
