JS实现上拉框的动态添加

JS实现下拉框的动态添加JS实现下拉框的动态添加，网页代码如下：SPAN styleFONT-SIZE: 14px!DOCTYPE h

JS实现下拉框的动态添加

JS实现上拉框的动态添加

JS实现下拉框的动态添加，网页代码如下：

<SPAN style="FONT-SIZE: 14px"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态添加下拉框</title> <script type="text/javascript" src="../JS文件/jquery.js"></script>
<script type="text/javascript" src="../JS文件/SelectMenu2.js" charset=“utf-8”></script> </head>
<body>
<form action="#"> <br />
<br /> <br />
<div class="CarInfo">
<span class="CarType">车类型： <select >
<option value="请选择" selected="selected">请选择</option> <option value="宝马">宝马</option>
<option value="奔驰">奔驰</option> </select>
</span>
<span class="CarColor" style="display:none">车颜色： <select>
</select> </span>
<span class="CarWheel" style="display:none">车轮：
<select> </select>
</span> </div>
</form> </body>
</html></SPAN>

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(); }
}); });