读取xml到下拉列表

在开发节点物流的平台时有一个下拉列表读取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做过一些东西。这个问题还算是没费太多功夫。
最后来个图片吧。

评论

1 楼 小嘴看世界 2007-03-23  

平时很少用select，顺便把相关的知识总结一下
1.动态创建select

   function createSelect(){

       var mySelect = document.createElement("select");
       mySelect.id = "mySelect"; 
       document.body.appendChild(mySelect);
   }

2.添加选项option

  function addOption(){

       //根据id查找对象，
        var obj=document.getElementById('mySelect');

        //添加一个选项
        obj.add(new   Option("文本","值"));  
  }

3.删除所有选项option

  function removeAll(){
        var obj=document.getElementById('mySelect');
 
        obj.options.length=0; 

  }

4.删除一个选项option

function removeOne(){
        var obj=document.getElementById('mySelect');

        //index,要删除选项的序号，这里取当前选中选项的序号

        var index=obj.selectedIndex;
        obj.options.remove(index); 
  }

5.获得选项option的值

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

8.删除select

   function removeSelect(){
         var mySelect = document.getElementById("mySelect");
        mySelect.parentNode.removeChild(mySelect);
  }