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

绝地灬酷狼 2022-08-14 04:52 276阅读 0赞

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

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

<!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如下：

<?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>