读取xml到下拉列表

读取xml到下拉列表

原文出处： http://liulu.javaeye.com/blog/64846

在开发节点物流的平台时有一个下拉列表读取xml的东西，虽然后来被用其他的东西换掉了，可是还要来说一说这个小东东。
首先是根据一个下拉列表的选择：A，货源，B、车源，C、其它

货源对应goods 车源对应truck 其它为others，下面是xml文件

<? xml version="1.0" encoding="gb2312" ?>   
< Info >   
     < goods >   
         < sdtys >   
             < sdty > 钢铁 </ sdty >   
             < sdty > 煤炭 </ sdty >   
             < sdty > 电力 </ sdty >   
         </ sdtys >   
         < uoms >   
             < uom > 吨 </ uom >   
             < uom > 立方米 </ uom >   
         </ uoms >   
     </ goods >   
     < truck >   
         < sdtys >   
             < sdty > 卡车 </ sdty >   
             < sdty > 斯太尔 </ sdty >   
             < sdty > tank </ sdty >   
         </ sdtys >   
         < uoms >   
             < uom > 100/公里 </ uom >   
             < uom > 22/小时 </ uom >   
         </ uoms >   
     </ truck >   
     < others >   
         < sdtys >   
             < sdty > 其他信息 </ sdty >   
         </ sdtys >   
         < uoms >   
             < uom > 个 </ uom >   
             < uom > 台 </ uom >   
             < uom > 其他 </ uom >   
         </ uoms >   
     </ others >   
</ Info >   

数据读取到的下拉列表分别为 类型 和 单位，分别对应上述中sdtys和uoms

然后是html文件，如下
1.信息选择的html代码

< select  id ="info.tpye"  name ="info.tpye"  onChange  = "GetInfo(this.selectedIndex);" >   
     < option ></ option >   
     < option  value ="A" > 货源信息 </ option >   
     < option  value ="B" > 车源信息 </ option >   
     < option  value ="C" > 其它信息 </ option >   
</ select >   

2.填入的html代码

< td > 类型 </ td >   
< td >   
     < select  name ="info.sdty"  id ="info.sdty"  style ="width:120px;" >   
     </ select >   
</ td >   
< td > 单位 </ td >   
< td >   
     < select  name ="info.uom"  id ="info.uom"  style ="width:120px;" >   
     </ select >   
</ td >   

下面是最重要的部分了吧，列出我的javascript代码，因为使用到了一个工具包prototype.js，所以$('s')可以使用document.getElementById('s')替代

1.getOptionsText(name)是一个方便我获得options内容的方法

function  getOptionsText(name) {   
        if($("info.sdty").selectedIndex != -1){   
            return $(name).options[$(name).selectedIndex].text   
        }else{   
            return "";   
        }   
    }   

2.读取xml
 

function  GetInfo(name)   
{   
    $('info.sdty').options.length=0;   
    $('info.uom').options.length=0;   
  
    var info;   
    if(name == 1){   
        info = "goods";   
    }else if(name == 2){   
        info = "truck"  
    }else if(name == 3){   
        info = "others";   
    }else{   
        return;   
    }   
  
    if(window.ActiveXObject){   
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
        xmlDoc.async = false;   
        xmlDoc.load("data.xml");   
    }else{   
        var parser = new DOMParser();   
        var xmlDoc = parser.parseFromString("data.xml","text/xml");   
    }   
    //var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
    //xmlDoc.load("data.xml");   
    //alert(xmlDoc.validateOnParse);   
  
    xmlDoc = xmlDoc.getElementsByTagName(info)[0];   
    var sdtys = xmlDoc.getElementsByTagName('sdty');   
    var uoms = xmlDoc.getElementsByTagName('uom');   
    for(var i=0;i<sdtys.length;i++){   
        //alert(sdtys(i).firstChild.nodeValue);   
        //$('info.sdty').options[i]=new Option(sdtys(i).firstChild.nodeValue,sdtys(i).firstChild.nodeValue);   
        $('info.sdty').add(new Option(sdtys(i).firstChild.nodeValue,sdtys(i).firstChild.nodeValue));   
    }   
    for(var i=0;i<uoms.length;i++){   
        $('info.uom').add(new Option(uoms(i).firstChild.nodeValue,uoms(i).firstChild.nodeValue));   
    }   
  
}    

我并没有删除掉注释代码是因为曾经碰到了一个问题，开始我是用如下方法来做的

   xmlDoc.load("data.xml");  

然后被报告说xml不可读取的信息，后来我加入了一个alert
  alert(xmlDoc.validateOnParse);  
validateOnParse的作用是告诉解析器文件是否有效
说明：此属性是可擦写的。如果传回值为true，表示文件被解析时被确认是有效的。如果传回false，表示文件是无效的，并被认为只是标准格式的（well-formed）文件。
弹出的时true，然后xml也可以读取到下拉列表，手动设置它为true，xml却依然不能读取，凭着一点经验，把xml文件设置为非异步

    xmlDoc.async = false;  

     结果OK了。不多解释，async还是很重要的一个属性，幸好使用Ajax做过一些东西。这个问题还算是没费太多功夫。
最后来个图片吧。