JS实现下拉框的动态添加（附效果)

效果展示：页面初加载时

选择车类型后

选择车颜色后

射流研究…实现下拉框的动态添加，网页代码如下：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title动态添加下拉框/title脚本类型=' text/JavaScript ' src=' http :/JS文件/jquery。js/'脚本脚本类型=' text/JavaScript ' src=' http :/JS文件/选择菜单2。js ' charset=" utf-8 "/script/head body form action=' # ' br/br/div class=' CarnFo ' span class=' CartType '车类型：选择选项值='请选择选定='选定'请选择/option选项值='宝马'宝马/option选项值='奔驰'奔驰/option/select/span class=' CarCOlOr ' style=' display : none '车颜色：select/select/span span class=' car wheel ' style=' display : none '车轮：选择/选择/SPAN/div/表单/正文/html/SPAN JS代码如下：复制代码代码如下： //JavaScript文档$(文档)。ready(function(){ var CarTypeSelect=$(').CarType ').子代(“选择”)；var CarColorSelect=$(' .CarColor ').子代(“选择”)；var CarWheelSelect=$(' .汽车车轮').子代(“选择”)；//给第一个下拉框的选择已更改时间编码cartypeselect。change(function(){//取得当前下拉框的值var CartTypeVaLue=$(this).val()；//当第一个下拉框内容改变的时候，第三个下拉框要隐藏起来CarWheelSelect.parent().hide()；if(CartTypeVaLue！=' '){ CarColorSelect。html(“”)；$("选项值="请选择/option ').appendTo(CarColorSelect)；开关(CartTypeValue){ case '宝马： var CarColor=['绿色','黑色'];for(var I=0；icar color . lengthi){ $(' option value=' carCOlOr[I]' ' ' carCOlOr[I]'/option ').appendTo(CarColorSelect)；}休息案例奔驰： var CarColor=['白色','红色'];for(var I=0；icar color . lengthi){ $(' option value=' carCOlOr[I]' ' ' carCOlOr[I]'/option ').appendTo(CarColorSelect)；} break} CarColorSelect.parent().show()；} else { CarColorSelect.parent().hide()；} });carcolorselect。change(function(){ var CarColorValue=$(this)).val()；卡罗尔瑟夫。html(" ")；if(CarColorValue！=' '){ CarRowselect。html(“”)；$("选项值="请选择/option ').附录(carrouser elect)；开关(CarColorValue){ case '绿色： var CarWheel=['绿钢','绿碳纤维'];for(var I=0；iCarWheel.lengthi ){ $('选项值='汽车车轮[I]' ' '汽车车轮[I]'/选项').附录(carrouser elect)；}休息案例红色： var CarWheel=['红钢','红碳纤维'];for(var I=0；iCarWheel.lengthi ){ $('选项值='汽车车轮[I]' ' '汽车车轮[I]'/选项').附录(carrouser elect)；}休息案例黑色： var CarWheel=['黑钢','黑碳纤维'];for(var I=0；iCarWheel.lengthi ){ $('选项值='汽车车轮[I]' ' '汽车车轮[I]'/选项').附录(carrouser elect)；}休息案例白色： var CarWheel=['白钢','白碳纤维'];for(var I=0；icarwheel . lengthi){ $(' option vaue=' car wheel[I]' ' ' car wheel[I]'/option ').附录(carrouser elect)；} break} car rousserve。parent().show()；} else { CarWheelSelect.parent().hide()；} });});