JS实现省份、城市的级联选择

发表于   |     |   阅读次数

实现省份、城市的级联选择，可以用纯JS实现，当然也可以使用jquery实现，下面就讲一下如何用纯javascript实现。
其实实现JS这个很简单，有两点需要注意：
1、对省份的下拉框的onchange事件进行监听，一旦省份被改变，那么就去xml资源文件里获取对应的城市，创建新的option节点，将之挂载在城市节点下。
2、有个地方需要注意，在监听事件里，首先需要先删除除city下第一个子节点外的所有的option节点，这是清除上一次的选择信息。
3、在清除上次选择的城市的时候，需要注意获得的城市节点数组的长度是不断变化的。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>js-9.html</title>
    <script type="text/javascript">
    window.onload=function(){
        var provinceNode=document.getElementById('province');
        provinceNode.onchange=function(){
            //清除city节点的所有子节点（除第一个节点）
            var cityNode=document.getElementById('city');
            var cityNodeOptions=cityNode.getElementsByTagName('option');
            var len=cityNodeOptions.length;
            for(var i=1;i<len;i++){
                //每次都清除第2个，因为数组cityNodeOptions的长度是动态变化的
                cityNode.removeChild(cityNodeOptions[1]);
                }
            var provinceVal=this.value;
            if(provinceVal==null){
                return false;
                }
            //加载city.xml文件
            var xmlDoc=parseXml('cities.xml');
            //使用XPATH技术，在xml中查找匹配的province节点
            var provinceEles = xmlDoc.selectNodes("//province[@name='"
                                         + provinceVal + "']");
            var cityNodes=provinceEles[0].getElementsByTagName('city');
            //遍历city，得到每个文本值，创建新的节点并添加
            for(var i=0;i<cityNodes.length;i++){
                var text=cityNodes[i].firstChild.nodeValue;
                var addNodeOption=document.createElement('option');
                var addNodeText=document.createTextNode(text);
                addNodeOption.appendChild(addNodeText);
                //将新节点挂载到city节点下
                cityNode.appendChild(addNodeOption);
              }
            }
        }

    function parseXml(fileName){
      //IE 内核的浏览器
      if (window.ActiveXObject) {
          //创建 DOM 解析器
          var doc = new ActiveXObject("Microsoft.XMLDOM");
          doc.async = "false";
          //加载 XML 文档, 获取 XML 文档对象
          doc.load(fileName);
          return doc;
      }
  }

   </script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
   <select id="province">
      <option value="">请选择...</option>
      <option value="河北省">河北省</option>
      <option value="辽宁省">辽宁省</option>
      <option value="山东省">山东省</option>
   </select>
   <select id='city'>
     <option value="">请选择...</option>
   </select>
  </body>

</html>

所使用的资源文件 cityes.xml如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="GB2312"?>
<china>

  <province name="河北省">
    <city>石家庄</city>
    <city>邯郸</city>
    <city>唐山</city>
    <city>张家口</city>
    <city>廊坊</city>
    <city>保定</city>
    <city>承德</city>
  </province>

  <province name="辽宁省">
    <city>沈阳</city>
    <city>大连</city>
    <city>鞍山</city>
    <city>抚顺</city>
    <city>铁岭</city>
  </province>

  <province name="山东省">
    <city>济南</city>
    <city>青岛</city>
    <city>威海</city>
    <city>烟台</city>
    <city>潍坊</city>
  </province>


</china>