快捷導(dǎo)航

JavaScript XML實(shí)現(xiàn)兩級(jí)級(jí)聯(lián)下拉列表

更新時(shí)間：2008年11月10日 00:20:39 作者：

用xml作為存儲(chǔ)容器，不用數(shù)據(jù)庫(kù)，速度和效率高些。

1.創(chuàng)建測(cè)試XML文件:select.xml

<?xml version="1.0" encoding="GBK"?> 
<select> 
<province id="sx"> 
陜西 
<city id="xa">西安</city> 
<city id="bj">寶雞</city> 
<city id="ak">安康</city> 
</province> 
<province id="js"> 
江蘇 
<city id="nj">南京</city> 
<city id="xz">徐州</city> 
</province> 
<province id="sh"> 
上海 
</province> 
</select> 

2.創(chuàng)建HTML頁(yè)面:select.html

復(fù)制代碼代碼如下:

<body> 
</body> 
<script>... 
/**//** 
* @description 二級(jí)級(jí)聯(lián)下拉 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.xml; 
SelectLevel.prototype.provinces; 
SelectLevel.prototype.parentName="province";//父節(jié)點(diǎn)名稱(chēng) 
SelectLevel.prototype.childName="city";//子節(jié)點(diǎn)名稱(chēng) 
SelectLevel.prototype.keyName="id";//屬性 
/**//** 
* 對(duì)象SelectLevel的構(gòu)造器 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
function SelectLevel(parentName,childName,keyName)...{ 
if(parentName!=null && parentName!="")...{ 
this.parentName=parentName; 
} 
if(childName!=null && childName!="")...{ 
this.childName=childName; 
} 
if(keyName!=null && keyName!="")...{ 
this.keyName=keyName; 
} 
} 
/**//** 
* 加載xml文件 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.readXML=function(url)...{ 
var selectXML; 
//如果它受支持，采用標(biāo)準(zhǔn)的2級(jí)DOM技術(shù) 
if(document.implementation && document.implementation.createDocument)...{ 
//創(chuàng)建新的Document對(duì)象 
selectXML=document.implementation.createDocument("","",null); 
//設(shè)置裝載完畢時(shí)觸發(fā)事件 
selectXML.onload=function()...{ 
alert("加載完成"); 
} 
selectXML.load(url); 
}else...{//IE瀏覽器創(chuàng)建Document對(duì)象 
selectXML=new ActiveXObject("Microsoft.XMLDOM"); 
//設(shè)置onload 
selectXML.onreadystatechange=function()...{ 
if(selectXML.readyState==4)...{ 
alert("加載完成"); 
} 
} 
selectXML.load(url); 
} 
this.xml=selectXML; 
} 
/**//** 
* 遍歷xml 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.iteratorXML=function(node,level)...{ 
var n=node; 
if(n==null)...{ 
n=this.xml.documentElement; 
} 
if(level==null)...{ 
level=0; 
} 
if(n.nodeType==3)...{ 
for(var i=0;i<level;i++)...{ 
document.write("-"); 
} 
document.write(n.data.trim()+"<br>"); 
}else...{ 
for(var m=n.firstChild;m!=null;m=m.nextSibling)...{ 
this.iteratorXML(m,level+1); 
} 
} 
} 
/**//** 
* 下拉聯(lián)動(dòng) 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.changeSelect=function()...{ 
var city=document.getElementById(this.childName); 
var province=document.getElementById(this.parentName); 
city.options.length=0; 
if(province.value==null || province.value=="")...{ 
city.options.length=1; 
city.options[0].text="請(qǐng)選擇…"; 
return; 
} 
var citys=this.provinces[this[province.value]].getElementsByTagName(this.childName); 
if(citys.length==0)...{ 
city.options.length=city.options.length+1; 
city.options[city.options.length-1].value=province.value; 
for(var i=0;i<province.options.length;i++)...{ 
if(province.options[i].selected)...{ 
city.options[city.options.length-1].text=province.options[i].text; 
return; 
} 
} 
return; 
} 
city.options.length=citys.length; 
for(var i=0;i<citys.length;i++)...{ 
city.options[i].value=citys[i].getAttribute(this.keyName); 
city.options[i].text=citys[i].firstChild.data.trim(); 
} 
} 
/**//** 
* 初始化下拉列表 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.init=function(parent,province,city)...{ 
this.provinces=this.xml.getElementsByTagName(this.parentName); 
var selectProvince=document.createElement("select"); 
var selectCity=document.createElement("select"); 
var obj=this; 
selectProvince.setAttribute("name",this.parentName); 
selectProvince.setAttribute("id",this.parentName); 
selectProvince.attachEvent("onchange",function()...{obj.changeSelect();}); 
selectProvince.options.length=this.provinces.length+1; 
selectProvince.options[0].text="請(qǐng)選擇…"; 
selectCity.setAttribute("name",this.childName); 
selectCity.setAttribute("id",this.childName); 
selectCity.options.length=1; 
selectCity.options[0].text="請(qǐng)選擇…"; 
for(var i=0;i<this.provinces.length;i++)...{ 
SelectLevel.prototype[this.provinces[i].getAttribute(this.keyName)]=i; 
selectProvince.options[i+1].value=this.provinces[i].getAttribute(this.keyName); 
selectProvince.options[i+1].text=this.provinces[i].firstChild.data.trim(); 
if(this.provinces[i].getAttribute(this.keyName)==province)...{ 
selectProvince.options[i+1].selected=true; 
var citys=this.provinces[i].getElementsByTagName(this.childName); 
selectCity.options.length=citys.length+1; 
for(var j=0;j<citys.length;j++)...{ 
selectCity.options[j+1].value=citys[j].getAttribute(this.keyName); 
selectCity.options[j+1].text=citys[j].firstChild.data.trim(); 
if(citys[j].getAttribute(this.keyName)==city)...{ 
selectCity.options[j+1].selected=true; 
} 
} 
} 
} 
parent.appendChild(selectProvince); 
parent.appendChild(selectCity); 
} 
String.prototype.trim=function()...{ 
return this.replace(/^s*/g,"").replace(/s*$/g,""); 
} 
//測(cè)試 
var newXML=new SelectLevel(); 
newXML.readXML("select.xml"); 
//newXML.iteratorXML(null,-2); 
newXML.init(document.body,"sx","bj"); 
</script> 