Dom和XML的二级联动菜单详解及其源代码

最新推荐文章于 2018-05-15 20:41:38 发布

向日葵的眼里只有太阳

最新推荐文章于 2018-05-15 20:41:38 发布

阅读量113

点赞数

分类专栏： DOM 文章标签： xml html function 浏览器 null encoding

本文链接：https://blog.csdn.net/smallsundoudou/article/details/7288324

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Dom和XML的二级联动菜单详解及其源代码

Xml文件： cities2.xml

<?xml version="1.0" encoding="UTF-8"?>

<china>

  <province name="河北">

       <city>廊坊</city>

       <city>保定</city>

       <city>石家庄</city>

       <city>邯郸</city>

  </province>

  <province name="北京">

       <city>大兴</city>

       <city>朝阳</city>

       <city>海淀</city>

       <city>平山</city>

  </province>

  <province name="河南">

        <city>洛阳</city>

       <city>商丘</city>

       <city>平顶山</city>

       <city>郑州</city>

  </province>

  <province name="陕西">

       <city>西安</city>

       <city>宝鸡</city>

       <city>兴平</city>

  </province>

    <province name="四川">

        <city>成都</city>

       <city>重庆</city>

        <city>内江</city>

       <city>乐山</city>

       <city>南充</city>

  </province>

</china>

Html文件：liandong2.html

省、市的二级联动菜单

效果如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

       <title>liandong2.html</title>

    </head>

//样式部分

    <body>

       <div align="center">

           <div id="data">

           <!—用下拉列表的形式表示省 和市-à

              <select id="province">

                  <option>

                     请选择省

                  </option>

              </select>

              <select id="city">

                  <option>

                     请选择市

                  </option>

              </select>

           </div>

       </div>

    </body>

</html>

//JS部分

<script type="text/javascript">

<!--

     //窗体加载完毕后  触发函数

     window.onload = function(){

            var xmlDoc = parseXml("cities2.xml");

            //获取省 xml

            var provinceNodes = xmlDoc.getElementsByTagName("province");

            //添加省的节点 html

            var provinceNode = document.getElementById("province");          

            //添加市的节点  html

            var citieshtmlNode= document.getElementById("city");          

            for(var i=0;i<provinceNodes.length;i++){

            //创建option html

            var optionNode = document.createElement("option");

            var value = provinceNodes[i].getAttribute("name"); //获取省的名称

            //为option 添加文本节点  值为省的name属性的值               optionNode.appendChild(document.createTextNode(value));//option子节点 的内容设置为  省的名字

            optionNode.setAttribute("value",value);//把这个省的名字 设置为 option的value值

            //添加到节点中

            provinceNode.appendChild(optionNode);

            }            

            //当你的省发生改变的时候  选择对应的市

            provinceNode.onchange = function(){

              //清空 select

              //获取你 清空的 select 里边的所有的option节点对象

              var cityhtmlOptionNodes = citieshtmlNode.getElementsByTagName("option");

              //获取长度

              var len = cityhtmlOptionNodes.length;

              //遍历

              for(var m=0;m<len;m++){

                   // 0 是有第二个对象 cityhtmlOptionNodes[1] 代表第二个对象  不为null  true   null false

                   if(cityhtmlOptionNodes[1]){

                       //始终移除第二个对象

                       citieshtmlNode.removeChild(cityhtmlOptionNodes[1]);

                   }

              }

              //遍历所有的省 节点对象

              for(var i=0;i<provinceNodes.length;i++){

                   //判断节点对象的值 等于 省节点的那么的值  则 获取该节点下面的所有的city节点对象

                   if(this.value==provinceNodes[i].getAttribute("name")){

                    //获取所有的city节点对象

                     var citiesNode =  provinceNodes[i].getElementsByTagName("city");

                     //遍历city节点对象

                     for(var j=0;j<citiesNode.length;j++){

                         //创建city节点对象的 option

                         var cityOptionNode = document.createElement("option");

                         //为创建的option节点对象 添加文本节点对象

                 

                         cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));

                         //把创建的option添加到 指定的 节点对象中

                         citieshtmlNode.appendChild(cityOptionNode);

                     }

                   }

              }

            } 

     }  

   function parseXml(filename){

    var xmlDoc;

       try{

          //IE浏览器

         xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  

       }catch(e){

           try{

             //非IE浏览器

             xmlDoc = document.implementation.createDocument("","",null);

           }catch(ex){

               alert("你使用的是不是浏览器呀！");

           }

       }

     //关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行

     xmlDoc.async=false;

     xmlDoc.load(filename);       

     return xmlDoc;      

   }   

    //JavaScript解析 xml文件   

   /*

    * html 文件   document 文档对象  节点

    * xml 文件     需要创建

    *    xmlDoc对象

    *     //IE

    *         new ActiveXObject("控件名称");//Microsoft.XMLDOM

    *     //firefox  非IE

    *     document.implementation.createDocument("","",null);

    * */   

//-->

</script>