JavaScript XML实现两级级联下拉列表_javascript技巧

1.创建测试XML文件:select.xml

复制代码 代码如下:

陕西
西安
宝鸡
安康


江苏
南京
徐州


上海

2.创建HTML页面:select.html

复制代码 代码如下:

<script>... <BR>/**//** <BR>* @description 二级级联下拉 <BR>* @author BluesLee <BR>* @lastModif BluesLee <BR>* @createDate 2007-10-13 <BR>* @modifDate 2007-10-15 <BR>* @version 1.0 <BR>*/ <BR>SelectLevel.prototype.xml; <BR>SelectLevel.prototype.provinces; <BR>SelectLevel.prototype.parentName="province";//父节点名称 <BR>SelectLevel.prototype.childName="city";//子节点名称 <BR>SelectLevel.prototype.keyName="id";//属性 <BR>/**//** <BR>* 对象SelectLevel的构造器 <BR>* @author BluesLee <BR>* @lastModif BluesLee <BR>* @createDate 2007-10-13 <BR>* @modifDate 2007-10-15 <BR>* @version 1.0 <BR>*/ <BR>function SelectLevel(parentName,childName,keyName)...{ <BR>if(parentName!=null && parentName!="")...{ <BR>this.parentName=parentName; <BR>} <BR>if(childName!=null && childName!="")...{ <BR>this.childName=childName; <BR>} <BR>if(keyName!=null && keyName!="")...{ <BR>this.keyName=keyName; <BR>} <BR>} <BR>/**//** <BR>* 加载xml文件 <BR>* @author BluesLee <BR>* @lastModif BluesLee <BR>* @createDate 2007-10-13 <BR>* @modifDate 2007-10-15 <BR>* @version 1.0 <BR>*/ <BR>SelectLevel.prototype.readXML=function(url)...{ <BR>var selectXML; <BR>//如果它受支持，采用标准的2级DOM技术 <BR>if(document.implementation && document.implementation.createDocument)...{ <BR>//创建新的Document对象 <BR>selectXML=document.implementation.createDocument("","",null); <BR>//设置装载完毕时触发事件 <BR>selectXML.onload=function()...{ <BR>alert("加载完成"); <BR>} <BR>selectXML.load(url); <BR>}else...{//IE浏览器创建Document对象 <BR>selectXML=new ActiveXObject("Microsoft.XMLDOM"); <BR>//设置onload <BR>selectXML.onreadystatechange=function()...{ <BR>if(selectXML.readyState==4)...{ <BR>alert("加载完成"); <BR>} <BR>} <BR>selectXML.load(url); <BR>} <BR>this.xml=selectXML; <BR>} <BR>/**//** <BR>* 遍历xml <BR>* @author BluesLee <BR>* @lastModif BluesLee <BR>* @createDate 2007-10-13 <BR>* @modifDate 2007-10-15 <BR>* @version 1.0 <BR>*/ <BR>SelectLevel.prototype.iteratorXML=function(node,level)...{ <BR>var n=node; <BR>if(n==null)...{ <BR>n=this.xml.documentElement; <BR>} <BR>if(level==null)...{ <BR>level=0; <BR>} <BR>if(n.nodeType==3)...{ <BR>for(var i=0;i<level;i++)...{ <BR>document.write("-"); <BR>} <BR>document.write(n.data.trim()+"<br>"); <BR>}else...{ <BR>for(var m=n.firstChild;m!=null;m=m.nextSibling)...{ <BR>this.iteratorXML(m,level+1); <BR>} <BR>} <BR>} <BR>/**//** <BR>* 下拉联动 <BR>* @author BluesLee <BR>* @lastModif BluesLee <BR>* @createDate 2007-10-13 <BR>* @modifDate 2007-10-15 <BR>* @version 1.0 <BR>*/ <BR>SelectLevel.prototype.changeSelect=function()...{ <BR>var city=document.getElementById(this.childName); <BR>var province=document.getElementById(this.parentName); <BR>city.options.length=0; <BR>if(province.value==null || province.value=="")...{ <BR>city.options.length=1; <BR>city.options[0].text="请选择…"; <BR>return; <BR>} <BR>var citys=this.provinces[this[province.value]].getElementsByTagName(this.childName); <BR>if(citys.length==0)...{ <BR>city.options.length=city.options.length+1; <BR>city.options[city.options.length-1].value=province.value; <BR>for(var i=0;i<province.options.length;i++)...{ <BR>if(province.options[i].selected)...{ <BR>city.options[city.options.length-1].text=province.options[i].text; <BR>return; <BR>} <BR>} <BR>return; <BR>} <BR>city.options.length=citys.length; <BR>for(var i=0;i<citys.length;i++)...{ <BR>city.options[i].value=citys[i].getAttribute(this.keyName); <BR>city.options[i].text=citys[i].firstChild.data.trim(); <BR>} <BR>} <BR>/**//** <BR>* 初始化下拉列表 <BR>* @author BluesLee <BR>* @lastModif BluesLee <BR>* @createDate 2007-10-13 <BR>* @modifDate 2007-10-15 <BR>* @version 1.0 <BR>*/ <BR>SelectLevel.prototype.init=function(parent,province,city)...{ <BR>this.provinces=this.xml.getElementsByTagName(this.parentName); <BR>var selectProvince=document.createElement("select"); <BR>var selectCity=document.createElement("select"); <BR>var obj=this; <BR>selectProvince.setAttribute("name",this.parentName); <BR>selectProvince.setAttribute("id",this.parentName); <BR>selectProvince.attachEvent("onchange",function()...{obj.changeSelect();}); <BR>selectProvince.options.length=this.provinces.length+1; <BR>selectProvince.options[0].text="请选择…"; <BR>selectCity.setAttribute("name",this.childName); <BR>selectCity.setAttribute("id",this.childName); <BR>selectCity.options.length=1; <BR>selectCity.options[0].text="请选择…"; <BR>for(var i=0;i<this.provinces.length;i++)...{ <BR>SelectLevel.prototype[this.provinces[i].getAttribute(this.keyName)]=i; <BR>selectProvince.options[i+1].value=this.provinces[i].getAttribute(this.keyName); <BR>selectProvince.options[i+1].text=this.provinces[i].firstChild.data.trim(); <BR>if(this.provinces[i].getAttribute(this.keyName)==province)...{ <BR>selectProvince.options[i+1].selected=true; <BR>var citys=this.provinces[i].getElementsByTagName(this.childName); <BR>selectCity.options.length=citys.length+1; <BR>for(var j=0;j<citys.length;j++)...{ <BR>selectCity.options[j+1].value=citys[j].getAttribute(this.keyName); <BR>selectCity.options[j+1].text=citys[j].firstChild.data.trim(); <BR>if(citys[j].getAttribute(this.keyName)==city)...{ <BR>selectCity.options[j+1].selected=true; <BR>} <BR>} <BR>} <BR>} <BR>parent.appendChild(selectProvince); <BR>parent.appendChild(selectCity); <BR>} <BR>String.prototype.trim=function()...{ <BR>return this.replace(/^s*/g,"").replace(/s*$/g,""); <BR>} <BR>//测试 <BR>var newXML=new SelectLevel(); <BR>newXML.readXML("select.xml"); <BR>//newXML.iteratorXML(null,-2); <BR>newXML.init(document.body,"sx","bj"); <BR></script>