JavaScript XML은 2단계 계단식 드롭다운 list_javascript 기술을 구현합니다.

1. 테스트 XML 파일 생성: select.xml

코드 복사 코드는 다음과 같습니다. id="xa" >시안 바오지 안강 &lt ;/province> 장쑤성 난징 ="xz ">쉬저우 상하이 select>

2. HTML 페이지 만들기: select.html

코드 복사 다음은:

... /**//** * @description 보조 계단식 드롭다운 * @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";//상위 노드 이름 SelectLevel.prototype.childName="city";//하위 노드 이름 SelectLevel.prototype. keyName="id";//속성 /**//** * 객체 SelectLevel 생성자 * @author BluesLee * @lastModif BluesLee * @createDate 2007-10-13 * @modifDate 2007-10-15 * @버전 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; //지원되는 경우 표준 레벨 2 DOM 기술을 사용하세요 if(document.implementation && document . implementation.createDocument)...{ //새 문서 객체 생성 selectXML=document.implementation.createDocument("","",null) //다음 경우에 트리거될 이벤트를 설정합니다. 로드가 완료되었습니다 selectXML.onload=function()...{ alert("로드가 완료되었습니다") } selectXML.load(url) }else... {// IE 브라우저는 문서 객체를 생성합니다 selectXML=new ActiveXObject("Microsoft.XMLDOM") //Set 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 * @버전 1.0 */ SelectLevel.prototype.iteratorXML=function(node,level)...{ var n=node; n== null)...{ n=this.xml.documentElement } if(level==null)...{ level=0; 🎜>if (n.nodeType==3)...{ for(var i=0;i document.write("-") } document.write(n.data.trim() " ") }else...{ for(var m=n.firstChild;m!=null;m =m.nextSibling)...{ this.iteratorXML(m,level 1) } } } /**//** * 드롭다운 링크 * @author BluesLee * @lastModif BluesLee * @createDate 2007-10-13 * @modifDate 2007-10-15 * @버전 1.0 */ SelectLevel. 프로토타입.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= "...을 선택하세요."; return; } var city=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 if(province.options[i].selected)...{ city.options[city.options.length-1 ].text =province.options[i].text; 반환 } } 반환 } city.options.length for( var i=0;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 ,지방, 시)...{ 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="请选择…"; selectCity.setAttribute("name",this.childName); selectCity.setAttribute("id",this.childName); selectCity.options.length=1; selectCity.options[0].text="请选择…"; for(var i=0;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)==지방)...{ 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 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,"" ); } //测试 var newXML=new SelectLevel(); newXML.readXML("select.xml"); //newXML.iteratorXML(null,-2); newXML.init(document.body,"sx","bj");