读取xml到下拉列表

首先是根据一个下拉列表的选择：A，货源，B、车源，C、其它

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

1. <?xml version="1.0" encoding="gb2312"?>  
2. <Info>  
3.     <goods>  
4.         <sdtys>  
5.             <sdty>钢铁</sdty>  
6.             <sdty>煤炭</sdty>  
7.             <sdty>电力</sdty>  
8.         </sdtys>  
9.         <uoms>  
10.             <uom>吨</uom>  
11.             <uom>立方米</uom>  
12.         </uoms>  
13.     </goods>  
14.     <truck>  
15.         <sdtys>  
16.             <sdty>卡车</sdty>  
17.             <sdty>斯太尔</sdty>  
18.             <sdty>tank</sdty>  
19.         </sdtys>  
20.         <uoms>  
21.             <uom>100/公里</uom>  
22.             <uom>22/小时</uom>  
23.         </uoms>  
24.     </truck>  
25.     <others>  
26.         <sdtys>  
27.             <sdty>其他信息</sdty>  
28.         </sdtys>  
29.         <uoms>  
30.             <uom>个</uom>  
31.             <uom>台</uom>  
32.             <uom>其他</uom>  
33.         </uoms>  
34.     </others>  
35. </Info>  

<script type="text/javascript">render_code();</script>

 

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

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

 

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

2.填入的html代码

代码

1. <td>类型</td>  
2. <td>  
3.     <select name="info.sdty" id="info.sdty" style="width:120px;">  
4.     </select>  
5. </td>  
6. <td>单位</td>  
7. <td>  
8.     <select name="info.uom" id="info.uom" style="width:120px;">  
9.     </select>  
10. </td>  

<script type="text/javascript">render_code();</script>

 

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

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

代码

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

<script type="text/javascript">render_code();</script>

2.读取xml

代码

1. function GetInfo(name)   
2. {   
3.     $('info.sdty').options.length=0;   
4.     $('info.uom').options.length=0;   
5.   
6.     var info;   
7.     if(name == 1){   
8.         info = "goods";   
9.     }else if(name == 2){   
10.         info = "truck"  
11.     }else if(name == 3){   
12.         info = "others";   
13.     }else{   
14.         return;   
15.     }   
16.   
17.     if(window.ActiveXObject){   
18.         var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
19.         xmlDoc.async = false;   
20.         xmlDoc.load("data.xml");   
21.     }else{   
22.         var parser = new DOMParser();   
23.         var xmlDoc = parser.parseFromString("data.xml","text/xml");   
24.     }   
25.     //var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
26.     //xmlDoc.load("data.xml");   
27.     //alert(xmlDoc.validateOnParse);   
28.   
29.     xmlDoc = xmlDoc.getElementsByTagName(info)[0];   
30.     var sdtys = xmlDoc.getElementsByTagName('sdty');   
31.     var uoms = xmlDoc.getElementsByTagName('uom');   
32.     for(var i=0;i<sdtys.length;i++){   
33.         //alert(sdtys(i).firstChild.nodeValue);   
34.         //$('info.sdty').options[i]=new Option(sdtys(i).firstChild.nodeValue,sdtys(i).firstChild.nodeValue);   
35.         $('info.sdty').add(new Option(sdtys(i).firstChild.nodeValue,sdtys(i).firstChild.nodeValue));   
36.     }   
37.     for(var i=0;i<uoms.length;i++){   
38.         $('info.uom').add(new Option(uoms(i).firstChild.nodeValue,uoms(i).firstChild.nodeValue));   
39.     }   
40.   
41. }   

<script type="text/javascript">render_code();</script>

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

代码

1. xmlDoc.load("data.xml");  

<script type="text/javascript">render_code();</script>

 

然后被报告说xml不可读取的信息，后来我加入了一个alert

代码

1. alert(xmlDoc.validateOnParse);  

<script type="text/javascript">render_code();</script>

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

代码

 

xmlDoc.async = false;