JS效果：实现下拉框的动态添加

07-05 08:55 709浏览

举报 T字号

大字

中字

小字

效果展示：

页面初加载时：

选择车类型后：

选择车颜色后：

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

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看JavaScript视频教程学习哦!

0人推荐

共同学习，写下你的评论

0条评论

代码小兵124

99篇文章贡献336699字

JS效果：实现下拉框的动态添加

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

JS效果：实现下拉框的动态添加

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>