javascript去读本地xml文件

最新推荐文章于 2021-06-17 15:26:16 发布

敬畏智心

最新推荐文章于 2021-06-17 15:26:16 发布

阅读量726

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/ranmudaofa/article/details/39399129

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

已下是讲xml本地数据文件作为数据源，使用javascript编写二级下拉菜单的案例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>二级级联</title>
   <style type="text/css">
   *{ margin: 0; padding: 0; }
   body{ padding-top: 50px; }
   #box{ width: 600px; margin: 0 auto;}
   .left, .right{ float: left; margin: 10px; }
   select{ border: 1px solid #ccc; }
   </style>

   <script type="text/javascript">

   //获取xml文件
   function parseXML(fileNmae){
       var xmlDoc;
       try{ //Internet Exporer
           xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
       }catch(e){
           try{ //Firefox, Mozilla, Opera, etc
               xmlDoc = document.implementation.createDocument("", "", null);
           }catch(e){

           }
       }
       //关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
       xmlDoc.async=false;
       //知解析器加载名为 "note.xml" 的 XML 文档、
       xmlDoc.load(fileNmae);
       return xmlDoc;
   }

   function getOption(optionVal){
       var option = document.createElement("option");
       option.setAttribute("value", optionVal);
       option.appendChild(document.createTextNode(optionVal));
       return option;
   }
   window.onload = function(){

       var sele_left = document.getElementById("sele_left");
       var sele_right = document.getElementById("sele_right");
       var xmldoc = parseXML("cities.xml");
       var provinces = xmldoc.getElementsByTagName("province");
       for(var i = 0; i < provinces.length; i++){
           var option = getOption(provinces[i].getAttribute("name"));
           sele_left.appendChild(option);
       }

       sele_left.onchange = function(){
           sele_right.length = 1;
           for(var i = 0; i < provinces.length; i++){
               if(provinces[i].getAttribute("name") == this.value){
                   var citys = provinces[i].getElementsByTagName("city");
                   for(var j = 0; j < citys.length; j++){
                       var option = getOption(citys[j].innerHTML);
                       sele_right.appendChild(option);
                   }
               }
           }

       }

   }

   </script>

</head>
<body>
   <div id="box">
       <div class="left">
           <select name="" id="sele_left">
               <option value="none">---请选择---</option>
           </select>
       </div>
       <div class="right">
           <select name="" id="sele_right">
               <option value="none">---请选择---</option>
           </select>
       </div>
   </div>
</body>
</html>