1. Create a test XML file: Select.xml
2. Create HTML page: select.html
<body>
</body>
<script>
/**//**
* @description level two cascade dropdown
* @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";//Parent node name
Selectlevel.prototype.childname= "City";//child node name
Selectlevel.prototype.keyname= "id";//property
/**//**
* Constructor for Object Selectlevel
* @author Blueslee
* @lastModif Blueslee
* @createDate 2007-10-13
* @modifDate 2007-10-15
* @version 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;
}
}
/**//**
* Load XML file
* @author Blueslee
* @lastModif Blueslee
* @createDate 2007-10-13
* @modifDate 2007-10-15
* @version 1.0
*/
Selectlevel.prototype.readxml=function (URL) ... {
var selectxml;
If it is supported, use standard Level 2 DOM technology
if (document.implementation && document.implementation.createDocument) ... {
Create a new Document object
Selectxml=document.implementation.createdocument ("", "", null);
Set trigger event at completion of Mount
Selectxml.onload=function () ... {
Alert ("Load Complete");
}
Selectxml.load (URL);
}else ... {//ie Browser Create Document Object
Selectxml=new ActiveXObject ("Microsoft.XMLDOM");
Set onload
Selectxml.onreadystatechange=function () ... {
if (selectxml.readystate==4) ... {
Alert ("Load Complete");
}
}
Selectxml.load (URL);
}
This.xml=selectxml;
}
/**//**
* Traverse XML
* @author Blueslee
* @lastModif Blueslee
* @createDate 2007-10-13
* @modifDate 2007-10-15
* @version 1.0
*/
Selectlevel.prototype.iteratorxml=function (node,level) ... {
var N=node;
if (n==null) ... {
N=this.xml.documentelement;
}
if (level==null) ... {
level=0;
}
if (n.nodetype==3) ... {
for (Var i=0;i<level;i++) ... {
document.write ("-");
}
document.write (N.data.trim () + "<br>");
}else ... {
for (Var m=n.firstchild;m!=null;m=m.nextsibling) ... {
This.iteratorxml (m,level+1);
}
}
}
/**//**
* Pull down linkage
* @author Blueslee
* @lastModif Blueslee
* @createDate 2007-10-13
* @modifDate 2007-10-15
* @version 1.0
*/
Selectlevel.prototype.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= "Please choose ...";
Return
}
var citys=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<province.options.length;i++) ... {
if (province.options[i].selected) ... {
City.options[city.options.length-1].text=province.options[i].text;
Return
}
}
Return
}
City.options.length=citys.length;
for (Var i=0;i<citys.length;i++) ... {
City.options[i].value=citys[i].getattribute (This.keyname);
City.options[i].text=citys[i].firstchild.data.trim ();
}
}
/**//**
* Initialize the Drop-down list
* @author Blueslee
* @lastModif Blueslee
* @createDate 2007-10-13
* @modifDate 2007-10-15
* @version 1.0
*/
Selectlevel.prototype.init=function (parent,province,city) ... {
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= "Please choose ...";
Selectcity.setattribute ("name", This.childname);
Selectcity.setattribute ("id", this.childname);
selectcity.options.length=1;
selectcity.options[0].text= "Please choose ...";
for (Var i=0;i<this.provinces.length;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) ==province) ... {
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<citys.length;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, "");
}
Test
var newxml=new selectlevel ();
Newxml.readxml ("Select.xml");
Newxml.iteratorxml (null,-2);
Newxml.init (document.body, "SX", "BJ");
</script>
