<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Dynamic Change Menu </title>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Selectmenu.js" ></script>
<body>
<form action= "#" >
<br/>
<br/>
<br/>
<div class= "Address" >
<span class= "province" >province:
<select>
<option value= "" selected= "selected" >please Choose province</option>
<option value= "Hebei" >HeBei</option>
<option value= "Shandong" >ShanDong</option>
</select>
</span>
<span class= "City" style= "Display:none" >city:
<select>
</select>
</span>
<span class= "area" style= "Display:none" >area:
<select>
</select>
</span>
<br/>
<br/>
<span class= "Addressselect" style= "Display:none" >
</span>
</div>
</form>
</body>
$ (document). Ready (function () {
Three dropdown boxes found
var provinceselect = $ (". Province "). Children (" select ");
var cityselect = $ (". City "). Children (" select ");
var areaselect = $ (". Area "). Children (" select ");
var addressselect=$ (". Addressselect ");
Register an event for the second dropdown box
Provinceselect.change (function () {
1, get the value of the current Drop-down box
var Provincevalue = $ (this). Val ();
1.1 Only the first Drop-down box content changes, the third dropdown box will be hidden
Areaselect.parent (). Hide ();
Addressselect.hide ();
Addressselect.html ("");
2, if the value is not empty, then show the city drop-down box
if (Provincevalue!= "") {
Cityselect.html ("");
$ ("<option value= ' >please Choose city</option>"). Appendto (Cityselect);
Switch (provincevalue)
{
The actual project, this city array is definitely on the server to get, here for simplicity, I directly customize an array
If the pursuit of perfection, here can also add a cache, to prevent repeated access
Case "Hebei":
var cityofhebei=["Shijiazhuang", "Cangzhou", "Langfang"];
for (Var i=0;i<cityofhebei.length;i++) {
$ ("<option value= '" +cityofhebei[i]+ "' >" +cityofhebei[i]+ "</option>"). Appendto (Cityselect);
}
Break
Case "Shandong":
var cityofshandon=["Jinan", "Dezhou", "Qingdao"];
for (Var i=0;i<cityofshandon.length;i++) {
$ ("<option value= '" +cityofshandon[i]+ "' >" +cityofshandon[i]+ "</option>"). Appendto (Cityselect);
}
Break
}
Cityselect.parent (). Show ();
} else {
Cityselect.parent (). Hide ();
}
});
Register an event for the second dropdown box
Cityselect.change (function () {
var Cityvalue = $ (this). Val ();
Addressselect.hide ();
Areaselect.parent (). Hide ();
Addressselect.html ("");
if (Cityvalue!= "") {
Areaselect.html ("");
$ ("<option value= ' >please Choose area</option>"). Appendto (Areaselect);
Switch (cityvalue)
{
In the actual project, the array of this area is definitely on the server, and for simplicity, I'm going to customize an array directly.
If the pursuit of perfection, here can also add a cache, to prevent repeated access
Case "Shijiazhuang":
var areaofcity=["Gaoxinqu", "Kaifaqu", "Xinhuaqu"];
for (Var i=0;i<areaofcity.length;i++) {
$ ("<option value= '" +areaofcity[i]+ "' >" +areaofcity[i]+ "</option>"). Appendto (Areaselect);
}
Break
Case "Cangzhou":
var areaofcity=["Xinhuaqu", "yunhequ"];
for (Var i=0;i<areaofcity.length;i++) {
$ ("<option value= '" +areaofcity[i]+ "' >" +areaofcity[i]+ "</option>"). Appendto (Areaselect);
}
Break
Case "Langfang":
var areaofcity=["Anciqu", "Guangyangqu"];
for (Var i=0;i<areaofcity.length;i++) {
$ ("<option value= '" +areaofcity[i]+ "' >" +areaofcity[i]+ "</option>"). Appendto (Areaselect);
}
Break
Case "Qingdao":
var areaofcity=["Gaoxinqu", "Kaifaqu", "Xinhuaqu"];
for (Var i=0;i<areaofcity.length;i++) {
$ ("<option value= '" +areaofcity[i]+ "' >" +areaofcity[i]+ "</option>"). Appendto (Areaselect);
}
Break
Case "Dezhou":
var areaofcity=["Xinhuaqu", "yunhequ"];
for (Var i=0;i<areaofcity.length;i++) {
$ ("<option value= '" +areaofcity[i]+ "' >" +areaofcity[i]+ "</option>"). Appendto (Areaselect);
}
Break
Case "Jinan":
var areaofcity=["Anciqu", "Guangyangqu"];
for (Var i=0;i<areaofcity.length;i++) {
$ ("<option value= '" +areaofcity[i]+ "' >" +areaofcity[i]+ "</option>"). Appendto (Areaselect);
}
Break
}
Areaselect.parent (). Show ();
} else {
Areaselect.parent (). Hide ();
}
});
Areaselect.change (function () {
var areavalue=$ (this). Val ();
Addressselect.html ("");
if (areavalue!= "") {
$ ("<span>the address are--province:" +provinceselect.val () + "City:" +cityselect.val () + "area:" +areaselect.val () + "</span>"). Appendto (Addressselect);
Addressselect.show ();
Alert ("The address is province:" +provinceselect.val () + "City:" +cityselect.val () + "area:" +areaselect.val ());
}
})
});
There is also a reference to jquery, seemingly to achieve this effect, with no need to be indifferent, recently in order to familiarize yourself with the use of jquery, so add.
