JavaScript XML implements two-level cascading drop-down list_javascript skills

1. Create a test XML file: select.xml

Copy the code The code is as follows:

< ?xml version="1.0" encoding="GBK"?>


Shaanxi
Xi'an
Baoji
Ankang
< ;/province>

Jiangsu
Nanjing
Xuzhou


Shanghai

2. Create HTML page: select.html

Copy code The code is as follows:

<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; >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>* @버전 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>//새 문서 객체 생성<BR>selectXML=document.implementation.createDocument("","",null) <BR>//다음 경우에 트리거될 이벤트를 설정합니다. 로드가 완료되었습니다 <BR>selectXML.onload=function()...{ <BR>alert("로드가 완료되었습니다") <BR>} <BR>selectXML.load(url) <BR>}else... {// IE 브라우저는 문서 객체를 생성합니다 <BR>selectXML=new ActiveXObject("Microsoft.XMLDOM") <BR>//Set 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>* @버전 1.0 <BR>*/ <BR>SelectLevel.prototype.iteratorXML=function(node,level)...{ <BR>var n=node; n== null)...{ <BR>n=this.xml.documentElement <BR>} <BR>if(level==null)...{ <BR>level=0; 🎜>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>* @버전 1.0 <BR>*/ <BR>SelectLevel. 프로토타입.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 city=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>반환 <BR>} <BR>} <BR>반환 <BR>} <BR>city.options.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 ,지방, 시)...{ <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); 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>