效果展示：
页面初加载时：
选择车类型后：
选择车颜色后：
js实现下拉框的动态添加，网页代码如下：
复制代码 代码如下:
动态添加下拉框
车类型：
请选择
宝马
奔驰
车颜色：
车轮：
js代码如下：
复制代码 代码如下:
// javascript document
$(document).ready(function (){
var cartypeselect = $(.cartype).children(select);
var carcolorselect = $(.carcolor).children(select);
var carwheelselect = $(.carwheel).children(select);
//给第一个下拉框的selectchanged时间编码
cartypeselect.change(function (){
//取得当前下拉框的值
var cartypevalue = $(this).val();
//当第一个下拉框内容改变的时候，第三个下拉框要隐藏起来
carwheelselect.parent().hide();
if(cartypevalue !=)
{
carcolorselect.html();
$(请选择).appendto(carcolorselect);
switch(cartypevalue){
case 宝马:
var carcolor=[绿色,黑色];
for(var i = 0;i$( + carcolor[i] + ).appendto(carcolorselect);
}
break;
case 奔驰:
var carcolor = [白色,红色];
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();
$(请选择).appendto(carwheelselect);
switch(carcolorvalue){
case 绿色:
var carwheel = [绿钢,绿碳纤维];
for(var i = 0;i$( + carwheel[i] + ).appendto(carwheelselect);
}
break;
case 红色:
var carwheel = [红钢,红碳纤维];
for(var i = 0;i$( + carwheel[i] + ).appendto(carwheelselect);
}
break;
case 黑色:
var carwheel = [黑钢,黑碳纤维];
for(var i = 0;i$( + carwheel[i] + ).appendto(carwheelselect);
}
break;
case 白色:
var carwheel = [白钢,白碳纤维];
for(var i=0;i$( + carwheel[i] + ).appendto(carwheelselect);
}
break;
}
carwheelselect.parent().show();
}
else
{
carwheelselect.parent().hide();
}
});
});