Tip: You can modify some of the code before running
<ptml> <pead runat= "Server" > <title> three Level City Linkage menu Demo </title> <script language= "Jav Ascript "type=" Text/javascript >//First need to initialize VAR xmldoc; var Nodeindex; function Getxmldoc () {xmldoc=new ActiveXObject ("Microsoft.XMLDOM"); var Currnode; Xmldoc.async=false; Xmldoc.load ("/demo/area.xml"); if (xmldoc.parseerror.errorcode!=0) {var myerr=xmldoc.parseerror; Alert ("Error!") "+myerr.reason); } function Init () {//Open XLMDOCM document Getxmldoc (); var Dropelement1=document.getelementbyid ("Select1"); var Dropelement2=document.getelementbyid ("Select2"); var Dropelement3=document.getelementbyid ("Select3"); Removedropdownlist (DROPELEMENT1); Removedropdownlist (DropElement2); Removedropdownlist (DROPELEMENT3); var Topnodelist=xmldoc.selectsinglenode ("AdDress "). ChildNodes; if (topnodelist.length>0) {//Province list Var country; Var province; VAR City; for (var i=0; i<topnodelist.length; i++) {//Add list item country=topnodelist[i]; var eoption=document.createelement ("option"); Eoption.value=country.getattribute ("name"); Eoption.text=country.getattribute ("name"); Dropelement1.add (eoption); } if (topnodelist[0].childnodes.length>0) {//City list for (Var i=0;i<topnodelist[ 0].childnodes.length;i++) {var id=dropelement1.options[0].value; Default for the first province of the city Province=topnodelist[0]; var eoption=document.createelement ("option"); Eoption.value=province.childnodes[i].getattribute ("name"); Eoption.text=province.childnodes[i].getattribute ("name"); Dropelement2.add (eoption); } if (topnodelist[0].childnodes[0].childnodes.length>0) {//County list fo R (Var i=0;i<topnodelist[0].childnodes[0].childnodes.length;i++) {var id=dropelement 2.options[0].value; Default is the first county list of the first city City=topnodelist[0].childnodes[0]; var eoption=document.createelement ("option"); Eoption.value=city.childnodes[i].getattribute ("name"); Eoption.text=city.childnodes[i].getattribute ("name"); This.document.getElementById ("Select3"). Add (Eoption); }}}} function Selectcity () {var Dropelement1=document.getelementbyid (" Select1 "); var Name=dropelement1.options[dropelement1.selectedindex].value; alert (ID); var Countrynodes=xmldoc.selectsinglenoDe ('//address/province [@name = ' ' +name+ '] '); alert (countryNodes.childNodes.length); var Province=document.getelementbyid ("Select2"); var City=document.getelementbyid ("Select3"); Removedropdownlist (province); Removedropdownlist (city); if (countrynodes.childnodes.length>0) {//Fill city for (Var i=0; i<countrynodes.childnodes.length; i++) {var provincenode=countrynodes.childnodes[i]; var eoption=document.createelement ("option"); Eoption.value=provincenode.getattribute ("name"); Eoption.text=provincenode.getattribute ("name"); Province.add (eoption); } if (countrynodes.childnodes[0].childnodes.length>0) {//fill the county of the first city of the selected province List for (Var i=0;i< countrynodes.childnodes[0].childnodes.length;i++) {//alert ("i=" +i+ "rn" + "length=") +countrynodes.childnodes[0].childnodes.length+ "RN"); var Dropelement2=document.getelementbyid ("Select2"); var Dropelement3=document.getelementbyid ("Select3"); Take the first city list in the province of the day Var citynode=countrynodes.childnodes[0]; alert (cityNode.childNodes.length); var eoption=document.createelement ("option"); Eoption.value=citynode.childnodes[i].getattribute ("name"); Eoption.text=citynode.childnodes[i].getattribute ("name"); Dropelement3.add (eoption); }}} function SelectCountry () {var dropelement2=document.getelem Entbyid ("Select2"); var name=dropelement2.options[dropelement2.seLectedindex].value; var provincenode=xmldoc.selectsinglenode ('//address/province/city[@name = ' +name+ '] '); var City=document.getelementbyid ("Select3"); Removedropdownlist (city); for (Var i=0; i<provincenode.childnodes.length; i++) {var citynode=provincenode.childnodes[i]; var eoption=document.createelement ("option"); Eoption.value=citynode.getattribute ("name"); Eoption.text=citynode.getattribute ("name"); City.add (eoption); } function Removedropdownlist (obj) {if (obj) {var len=obj.options.length; if (len>0) {//alert (len); for (Var i=len;i>=0;i--) {obj.remove (i); }}} </script> </pead> <body onload= "Init ();" > <form id= "Form1" runat= "Server" > <div> <select id= "Select1" name= "Select1" runat= "Server" Onchange= "selectcity ();" > <option value= "" selected= "true" > Province/Municipality </option> </select> <select id= "Select2" Name= "Sel Ect2 "runat=" Server "onchange=" SelectCountry () "> <option value=" "selected=" true "> Please select </option> </ select> <select id= "Select3" name= "Select3" runat= "Server" > <option value= "" selected= "true" > Please select < /option> </select> </div> </form> </body> </ptml></td> </tr> ;/table>
Tip: You can modify some of the code before running
