通过JS解析XML动态加载下拉列表框
一个很基本的JS解析XML,兼容IE跟FireFox,以下代码在两浏览器下均测试成功。
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type='text/javascript'>
loadXML = function(xmlFile){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.ActiveXObject){
var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
break;
}catch(e){
}
}
}
//支持Mozilla浏览器
else if(document.implementation && document.implementation.createDocument){
try{
/* document.implementation.createDocument('','',null); 方法的三个参数说明
* 第一个参数是包含文档所使用的命名空间URI的字符串；
* 第二个参数是包含文档根元素名称的字符串；
* 第三个参数是要创建的文档类型（也称为doctype）
*/
xmlDoc = document.implementation.createDocument('','',null);
}catch(e){
}
}
else{
return null;
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
//对xml对象进行判断
checkXMLDocObj = function(xmlFile){
var xmlDoc = loadXML(xmlFile);
if(xmlDoc==null){
alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
//window.location.href='某某地址(比如首页)';
}
return xmlDoc;
}
//参数1:控件id号,参数2:理解为定位节点
initializeSelect = function(oid,xPath){
var xmlDoc = checkXMLDocObj('sqlInfo.xml');
var n;
var l;
var e = document.getElementById(oid);//得到下拉列表框控件
if(e!=null){
n = xmlDoc.getElementsByTagName(xPath);
l = n.length;
//循环添加列表子项
for(var i=0;i<l;i++){
e.options.add(new Option(n[i].getElementsByTagName("cNname")[0].firstChild.nodeValue, n[i].getElementsByTagName("cIP")[0].firstChild.nodeValue));
}
}
}
showValue = function(){
var oOptions = document.getElementById('company');
for(var i=0;i<oOptions.length;i++){
if(oOptions[i].selected==true){
alert(oOptions.value);
}
}
}
</script>
</HEAD>
<BODY onload="initializeSelect('company','Company')">
<select id='company' name='company' onChange='showValue()'>
<option selected='selected'></option>
</select>
</BODY>
</HTML>
附上XML测试文件
Code<?xml version="1.0" encoding="utf-8" ?>
<DongFang>
<Company>
<cNname>1</cNname>
<cIP>1</cIP>
</Company>
<Company>
<cNname>2</cNname>
<cIP>2</cIP>
</Company>
<Company>
<cNname>3</cNname>
<cIP>3</cIP>
</Company>
<Company>
<cNname>4</cNname>
<cIP>4</cIP>
</Company>
<Company>
<cNname>5</cNname>
<cIP>5</cIP>
</Company>
<Company>
<cNname>6</cNname>
<cIP>6</cIP>
</Company>
</DongFang>
