您的位置：首页 > Web前端 > JavaScript

省份城市二级联动【DOM+js+XML】

2017-08-20 19:20 549 查看


功能

省份城市二级联动【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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航