Effect Display:
when the page is first loaded :
After selecting the type of car:
After selecting the car color:
JS Implementation of the Drop-down box dynamic Add, the page code is as follows :
Copy Code code as follows:
<! 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> Add Drop-down Box dynamically </title>
<script type= "Text/javascript" src= ". /js file/jquery.js "></script>
<script type= "Text/javascript" src= ". /js file/selectmenu2.js "charset=" Utf-8 "></script>
<body>
<form action= "#" >
<br/>
<br/>
<br/>
<div class= "Carinfo" >
<span class= "Cartype" > Car type:
<select >
<option value= "Please select" selected= "selected" > Please select </option>
<option value= "BMW" > BMW </option>
<option value= "Benz" > Mercedes-Benz </option>
</select>
</span>
<span class= "Carcolor" style= "display:none" > Car color:
<select>
</select>
</span>
<span class= "Carwheel" style= "Display:none" > Wheels:
<select>
</select>
</span>
</div>
</form>
</body>
JS code is as follows：
Copy Code code as follows:
JavaScript Document
$ (document). Ready (function () {
var cartypeselect = $ (". Cartype "). Children (" select ");
var carcolorselect = $ (". Carcolor "). Children (" select ");
var carwheelselect = $ (". Carwheel "). Children (" select ");
Selectchanged time code for the first Drop-down box
Cartypeselect.change (function () {
Gets the value of the current Drop-down box
var Cartypevalue = $ (this). Val ();
When the first dropdown box is changed, the third dropdown box will be hidden.
Carwheelselect.parent (). Hide ();
if (Cartypevalue!= "")
{
Carcolorselect.html ("");
$ ("<option value = ' > Please select </option>"). Appendto (Carcolorselect);
Switch (cartypevalue) {
Case "BMW":
var carcolor=["Green", "Black"];
for (var i = 0;i<carcolor.length;i++) {
$ ("<option value= '" +carcolor[i]+ "' >" + carcolor[i] + "</option>"). Appendto (Carcolorselect);
}
Break
Case "Mercedes":
var carcolor = ["White", "red"];
for (var i = 0;i<carcolor.length;i++) {
$ ("<option value= '" +carcolor[i]+ "' >" + carcolor[i] + "</option>"). Appendto (Carcolorselect);
}
Break
}
Carcolorselect.parent (). Show ();
}
Else
{
Carcolorselect.parent (). Hide ();
}
});
Carcolorselect.change (function () {
var Carcolorvalue = $ (this). Val ();
Carwheelselect.html ("");
if (Carcolorvalue!= "")
{
Carwheelselect.html ("");
$ ("<option value = ' > Please select </option>"). Appendto (Carwheelselect);
Switch (carcolorvalue) {
Case "Green":
var carwheel = ["Green steel", "green carbon fiber"];
for (var i = 0;i<carwheel.length;i++) {
$ ("<option value= '" +carwheel[i]+ "' >" + carwheel[i] + "</option>"). Appendto (Carwheelselect);
}
Break
Case "Red":
var carwheel = ["Red Steel", "Red carbon fiber"];
for (var i = 0;i<carwheel.length;i++) {
$ ("<option value= '" +carwheel[i]+ "' >" + carwheel[i] + "</option>"). Appendto (Carwheelselect);
}
Break
Case "BLACK":
var carwheel = ["Black Steel", "black carbon fiber"];
for (var i = 0;i<carwheel.length;i++) {
$ ("<option value= '" +carwheel[i]+ "' >" + carwheel[i] + "</option>"). Appendto (Carwheelselect);
}
Break
Case "White":
var carwheel = ["Stainless steel", "White carbon fiber"];
for (Var i=0;i<carwheel.length;i++) {
$ ("<option vaiue= '" +carwheel[i]+ "' >" + carwheel[i] + "</option>"). Appendto (Carwheelselect);
}
Break
}
Carwheelselect.parent (). Show ();
}
Else
{
Carwheelselect.parent (). Hide ();
}
});
});
