JS Code
The code is as follows |
Copy Code |
<html>
<head runat= "Server" >
<title> provincial and county level three linkage menu </title>
<script language= "javascript" type= "Text/javascript" >
First you need to initialize
var xmldoc;
var Nodeindex;
function Getxmldoc ()
{
Xmldoc=new ActiveXObject ("Microsoft.XMLDOM");
var Currnode;
Xmldoc.async=false;
Xmldoc.load ("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 items
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;
The default is the city of the first province
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
for (Var i=0;i<topnodelist[0].childnodes[0].childnodes.length;i++)
{
var Id=dropelement2.options[0].value;
Default is the first county list for 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)
{
Populate the county list for the first city in the selected province
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.getelementbyid ("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>
</head>
<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= "Select2" 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>
</html> |
XML file
The code is as follows |
Copy Code |
<?xml version= "1.0" encoding= "gb2312"?>
<address>
<province name= "Beijing" >
<city name= "Beijing Jurisdiction" >
<country name= "Dongcheng District"/>
<country name= "Xicheng District"/>
<country name= "Chongwen District"/>
<country name= "Xuanwu District"/>
<country name= "Chaoyang District"/>
<country name= "Fengtai District"/>
<country name= "Shijingshan District"/>
<country name= "Haidian District"/>
<country name= "Mentougou District"/>
<country name= "Fangshan District"/>
<country name= "Tongzhou District"/>
<country name= "Shunyi District"/>
<country name= "Changping District"/>
<country name= "Daxing District"/>
<country name= "Huairou"/>
<country name= "Pinggu District"/>
</city>
<city name= "Beijing County" >
<country name= "Miyun County"/>
<country name= "Yanqing County"/>
</city>
</province>
<province name= "Tianjin" >
<city name= "Tianjin jurisdiction" >
<country name= "Zone of Peace"/>
<country name= "Hedong District"/>
<country name= "Hexi District"/>
<country name= "Nankai District"/>
<country name= "Hebei District"/>
<country name= "Hongqiao District"/>
<country name= "Tanggu District"/>
<country name= "Hangu District"/>
<country name= "Grand Port District"/>
<country name= "Dongli District"/>
<country name= "Xiqing District"/>
<country name= "Jinnan District"/>
<country name= "Beichen District"/>
<country name= "Wuqing District"/>
<country name= "Baochi District"/>
</city>
<province name= "Taiwan Province"/>
<province name= "HKSAR"/>
<province name= "MSAR"/>
</address> |
Here I only add a few cities and more cities, you can click the XML rules to add their own oh.