讀取xml到下拉列表

在開發節點物流的平臺時有一個下拉列表讀取xml的東西,雖然後來被用其他的東西換掉了,可是還要來說一說這個小東東。
首先是根據一個下拉列表的選擇:A,貨源,B、車源,C、其它

貨源對應goods 車源對應truck 其它爲others,下面是xml文件
[code]<?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>[/code]

數據讀取到的下拉列表分別爲 類型 和 單位,分別對應上述中sdtys和uoms

然後是html文件,如下
1.信息選擇的html代碼
[code]<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>[/code]
2.填入的html代碼
[code]<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>[/code]

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

1.getOptionsText(name)是一個方便我獲得options內容的方法
[code]function getOptionsText(name){
if($("info.sdty").selectedIndex != -1){
return $(name).options[$(name).selectedIndex].text
}else{
return "";
}
}[/code]
2.讀取xml
[code]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));
}

}
[/code]
我並沒有刪除掉註釋代碼是因爲曾經碰到了一個問題,開始我是用如下方法來做的
[code]
xmlDoc.load("data.xml");[/code]

然後被報告說xml不可讀取的信息,後來我加入了一個alert
[code]alert(xmlDoc.validateOnParse);[/code]
validateOnParse的作用是告訴解析器文件是否有效
說明:此屬性是可擦寫的。如果傳回值爲true,表示文件被解析時被確認是有效的。如果傳回false,表示文件是無效的,並被認爲只是標準格式的(well-formed)文件。
彈出的時true,然後xml也可以讀取到下拉列表,手動設置它爲true,xml卻依然不能讀取,憑着一點經驗,把xml文件設置爲非異步
[code]xmlDoc.async = false;[/code]
結果OK了。不多解釋,async還是很重要的一個屬性,幸好使用Ajax做過一些東西。這個問題還算是沒費太多功夫。
最後來個圖片吧。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章