JS implements dynamic addition of drop-down box (with effects)_javascript skills

Effect display:

When the page is first loaded: 

After selecting the car type: 

After selecting the car color:  

JS implements the dynamic addition of drop-down boxes. The web page code is as follows:

Copy the code The code is as follows:

Car type:

Please select
BMW
Benz



Car color:




Wheels:

< /body> Copy the code

The code is as follows:

// JavaScript Document
$(document).ready(function (){
var CarTypeSelect = $(".CarType").children("select");
var CarColorSelect = $(".CarColor").children("select");
var CarWheelSelect = $(".CarWheel").children("select");


//given SelectChanged time encoding of a drop-down box
CarTypeSelect.change(function (){

//Get the value of the current drop-down box
var CarTypeValue = $(this).val();
//When the content of the first drop-down box changes, the third drop-down box should be hidden
CarWheelSelect.parent().hide();

if(CarTypeValue !="")
{
CarColorSelect.html("");
$("Please select").appendTo(CarColorSelect);
switch(CarTypeValue ){

case "BMW":
var CarColor=["green","black"];
for(var i = 0;i$("" CarColor[i] "").appendTo(CarColorSelect);
}
break;
case "Mercedes-Benz":
var CarColor = ["white","red"];
for(var i = 0;i$("" CarColor[i] "").appendTo(CarColorSelect);
}
break;
}
CarColorSelect.parent( ).show();
}
else
{
CarColorSelect.parent().hide();
}
});

CarColorSelect.change (function (){

var CarColorValue = $(this).val();
CarWheelSelect.html("");
if(CarColorValue != "")
{
CarWheelSelect.html("");
$("Please select").appendTo(CarWheelSelect);
switch(CarColorValue){

case "green":
var CarWheel = ["green steel","green carbon fiber"];
for(var i = 0;i$ ("" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
case " Red":
var CarWheel = ["Red Steel","Red Carbon Fiber"];
for(var i = 0;i$("" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
case "Black":
var CarWheel = ["Black Steel","Black Carbon Fiber"];
for(var i = 0;i$("" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
case "white":
var CarWheel = ["white Steel","White Carbon Fiber"];
for(var i=0;i$("" CarWheel[i] "").appendTo(CarWheelSelect);
}
break;
}
CarWheelSelect.parent().show();
}
else
{
CarWheelSelect.parent().hide();
}
});
});