转载一个通过解析XML文件为SELECT列表动态添加选项,只是这种方式是在页面加载的时候去为下拉列表添加选项,能不能在点击的时候再去请求下拉列表的内容呢?不用DIV等方式模拟能实现吗?
一个很基本的JS解析XML
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;
//判断浏览器的类型
//支持IE浏览器
if(window.ActiveXObject){
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
//支持Mozilla浏览器
else if(document.implementation && document.implementation.createDocument){
xmlDoc = document.implementation.createDocument('','',null);
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else{
return null;
}
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++){
var ption = document.createElement('option');
option.innerText = n[i].firstChild.text;
option.value = n[i].lastChild.text;
e.appendChild(option);
}
}
}
</script>
</HEAD>
<BODY nload="initializeSelect('company','Company')">
<select id='company' name='company'>
<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>