JavaScript XML は 2 レベルのカスケード ドロップダウン リストを実装します_javascript スキル

1. テスト XML ファイルを作成します: select.xml

コードをコピーします コードは次のとおりです:

< ?xml version="1.0" encoder="GBK"?>
id="xa" >西安
宝鶏
安康


江蘇
南京 ="xz ">徐州
<省id="sh"> select>


2. HTML ページを作成します: select.html




コードをコピーします

以下:

<script>... <br>/**//** <br>* @description Secondary cascading drop-down <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";//Parent node name<br>SelectLevel.prototype.childName="city";//Child node name<br>SelectLevel.prototype. keyName="id";//Attributes<br>/**//** <br>* Constructor of object 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>* Load xml file <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>//If it is supported, use standard level 2 DOM technology <br>if(document.implementation && document .implementation.createDocument)...{ <br>//Create a new Document object<br>selectXML=document.implementation.createDocument("","",null); <br>//Set an event to be triggered when loading is complete <br>selectXML.onload=function()...{ <br>alert("Loading completed"); <br>} <br>selectXML.load(url); <br>}else...{// IE browser creates a Document object <br>selectXML=new ActiveXObject("Microsoft.XMLDOM"); <br>//Set onload <br>selectXML.onreadystatechange=function()...{ <br>if(selectXML.readyState ==4)...{ <br>alert("Loading completed"); <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>* Drop-down linkage<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="Please select …"; <br>return; <br>} <br>var cities=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>* Initialize drop-down list <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>