2007-03-23

读取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做过一些东西。这个问题还算是没费太多功夫。
最后来个图片吧。
  • 5db085a8-e9c5-4eaa-9d24-a5b9e689ce7b-thumb
  • 描述:
  • 大小: 47.5 KB
评论
小嘴看世界 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);
}
发表评论

您还没有登录，请登录后发表评论

小嘴看世界
搜索本博客
我的相册
F9d2dd1b-26f5-3fa8-8934-863e273e9e39-thumb
传说中的奶牛
共 14 张
存档
最新评论