Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 18:58:52
Original
1204 Leute haben es durchsucht

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>

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage