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

所属分类：网络编程 / JavaScript 阅读数： 1139

收藏 0赞 0分享

效果展示：

页面初加载时：

选择车类型后：

选择车颜色后：

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

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