JS實現(xiàn)下拉框的動態(tài)添加(附效果)

更新時間：2013年04月03日 15:16:01 作者：

頁面初加載時：選擇車類型后：選擇車顏色后：JS實現(xiàn)下拉框的動態(tài)添加，網(wǎng)頁代碼如下：動態(tài)添加下拉框車類型：請選擇寶馬、奔馳車顏色

效果展示：

頁面初加載時：

選擇車類型后：

選擇車顏色后：

JS實現(xiàn)下拉框的動態(tài)添加，網(wǎng)頁代碼如下：

 
<!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>動態(tài)添加下拉框</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代碼如下：

復(fù)制代碼代碼如下:

 
// JavaScript Document 
$(document).ready(function (){ 
var CarTypeSelect = $(".CarType").children("select"); 
var CarColorSelect = $(".CarColor").children("select"); 
var CarWheelSelect = $(".CarWheel").children("select"); 


//給第一個下拉框的SelectChanged時間編碼 
CarTypeSelect.change(function (){ 

//取得當(dāng)前下拉框的值 
var CarTypeValue = $(this).val(); 
//當(dāng)?shù)谝粋€下拉框內(nèi)容改變的時候，第三個下拉框要隱藏起來 
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(); 
} 
}); 
}); 