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("");$("<option value = ''>请选择</option>").appendTo(CarColorSelect);switch(CarTypeValue){case "宝马":var CarColor=["绿色","黑色"];for(var i = 0;i<CarColor.length;i++){$("<option value='"+CarColor[i]+"'>" + CarColor[i] + "</option>").appendTo(CarColorSelect);}break;case "奔驰":var CarColor = ["白色","红色"];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 = ''>请选择</option>").appendTo(CarWheelSelect);switch(CarColorValue){case "绿色":var CarWheel = ["绿钢","绿碳纤维"];for(var i = 0;i<CarWheel.length;i++){$("<option value='"+CarWheel[i]+"'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);}break;case "红色":var CarWheel = ["红钢","红碳纤维"];for(var i = 0;i<CarWheel.length;i++){$("<option value='"+CarWheel[i]+"'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);}break;case "黑色":var CarWheel = ["黑钢","黑碳纤维"];for(var i = 0;i<CarWheel.length;i++){$("<option value='"+CarWheel[i]+"'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);}break;case "白色":var CarWheel = ["白钢","白碳纤维"];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();}});});