posts - 297,  comments - 1618,  trackbacks - 0
读取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做过一些东西。这个问题还算是没费太多功夫。
最后来个图片吧。

posted on 2007-04-04 16:38 阿蜜果 阅读(2031) 评论(2)  编辑  收藏 所属分类: Ajax


FeedBack:
# re: 读取xml到下拉列表
2008-01-08 13:32 | hbyufan@hotmail.com
读取XML文件内容的工作不该用javascript来做吧，那应该是归属服务器端的事情  回复  更多评论
  
# re: 读取xml到下拉列表
2008-06-26 12:26 | 我
写的很清晰，不过提个小小的意见~能不能把每个文件的名称都标记出来啊~  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
<2007年4月>
日一二三四五六
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

      生活将我们磨圆，是为了让我们滚得更远——“圆”来如此。
      我的作品：
      玩转Axure RP  （2015年12月出版）
      

      Power Designer系统分析与建模实战  （2015年7月出版）
      
     Struts2+Hibernate3+Spring2   （2010年5月出版）
     

留言簿(262)

随笔分类

随笔档案

文章分类

相册

关注blog

积分与排名

  • 积分 - 2280242
  • 排名 - 3

最新评论

阅读排行榜

评论排行榜