省级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>Untitled Document</title>
       <script type="text/javascript">

           window.onload = function(){

               //1. 为 #province 添加 onchange 响应函数
               document.getElementById("province").onchange = function(){

                   //1.1 把 #city 节点除第一个子节点外都移除.
                   var cityNode = document.getElementById("city");
                   var cityNodeOptions = cityNode.getElementsByTagName("option");

                   var len = cityNodeOptions.length;
                   for(var i =1; i < len; i++){
                       cityNode.removeChild(cityNodeOptions[1]);
                   }

                   var provinceVal = this.value;
                   if(provinceVal == ""){
                       return;
                   }

                   //2. 加载 cities.xml 文件. 得到代表给文档的 document 对象
                   var xmlDoc = parseXml("cities.xml");

                   //3. 在 cities.xml 文档中查找和选择的省匹配的 province 节点.

                   //直接使用 XPath 技术查找 XML 文档中匹配的节点.
                   var provinceEles = xmlDoc.selectNodes("//province[@name='"
                                                   + provinceVal + "']")

                   //4. 再得到 province 节点的所有的 city 子节点
                   var cityNodes = provinceEles[0].getElementsByTagName("city");

                   //5. 遍历 city 子节点, 得到每一个 city 子节点的文本值
                   for(var i = 0; i < cityNodes.length; i++){
                       //6. 利用得到的文本值创建 option 节点
                       //<option>cityName</option>
                       var cityText = cityNodes[i].firstChild.nodeValue;
                       var cityTextNode = document.createTextNode(cityText);
                       var optionNode = document.createElement("option");
                       optionNode.appendChild(cityTextNode);

                       //7. 并把 6 创建的 option 节点添加为 #city 的子节点.
                       cityNode.appendChild(optionNode);
                   }

               }

               //js 解析 xml 文档的函数, 只支持 ie
               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>

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

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

猜你喜欢