<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>menu2level.html</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" >
function Loadxml () {
var xmldoc;
try{
Ie
Xmldoc=new ActiveXObject ("Microsoft.XMLDOM");
}catch (e) {
try{
xmldoc = Document.implementation.createDocument ("", "", null);
}catch (e) {
alert (e.message);
Return
}
}
Xmldoc.async=false;
Xmldoc.load ("Cities.xml");
return xmldoc;
}
The page loads after loading in the finished province loading
Onload=function () {
var XmlDocument = Loadxml ();
var Provincearr =xmldocument.getelementsbytagname ("province");
var prosize = provincearr.length;
for (Var i=0;i<prosize;i++) {
Create option Node
var optionelement = document.createelement ("option");
var provincename = provincearr[i].getattribute ("name");
Create a text node
var textelement =document.createtextnode (Provincename);
Optionelement.appendchild (TextElement);
Optionelement.setattribute ("value", provincename);
var node = document.getElementById ("province");
Node.appendchild (OptionElement);
}
}
Provinces Change events
function changeprovince (node) {
Get the selected corner mark
var index = Node.selectedindex;
Get the corresponding province name
var provincename = Node.options[index].value;
LoadCities (Provincename);
}
Load City information according to province number
function LoadCities (proname) {
var XmlDocument = Loadxml ();
var Provincearr =xmldocument.getelementsbytagname ("province");
Get the elements of a city
var Cityselectele = document.getElementById ("Cities");
var size = CitySelectEle.options.length;
for (Var i=size;i>0;i--) {
Cityselectele.remove (i);
}
Get the number of provinces
var prosize = provincearr.length;
var proelement;
Get the corresponding province element
for (Var i=0;i<prosize;i++) {
if (Provincearr[i].getattribute ("name") ==proname) {
Proelement = Provincearr[i];
Break
}
}
Get the city information of the province
var Citiesarr = proelement.getelementsbytagname ("city");
var len = citiesarr.length;
for (Var i=0;i<len;i++) {
Create option Node
var optionelement = document.createelement ("option");
Get City Name
var cityname = Citiesarr[i].firstchild.nodevalue;
Create a text node
var textelement =document.createtextnode (CityName);
Optionelement.appendchild (TextElement);
Optionelement.setattribute ("value", cityname);
Cityselectele.appendchild (OptionElement);
}
}
function GetValue () {
var pro = document.getElementById ("province"). Value;
var city = document.getElementById ("Cities"). Value;
Alert (pro+ ":" +city);
}
</script>
<body>
<select id= "province" onchange= "Changeprovince (This)" >
<option value= "" selected= "selected" >--province--</option>
</select>
<select id= "Cities" >
<option value= "" "Selected=" selected ">--City--</option>
</select>
<input type= "button" value= "pop-up" onclick= "GetValue ()"/>
</body>
http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/ Font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/southeast
