JS实现下拉框的动态添加(附效果)
2013-04-03 00:00
761 查看
效果展示:
页面初加载时:
选择车类型后:
选择车颜色后:
JS实现下拉框的动态添加,网页代码如下:
JS代码如下:
页面初加载时:
选择车类型后:
选择车颜色后:
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(); } }); });
相关文章推荐
- JS实现下拉框的动态添加(附效果)
- 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
- JS实现下拉框的动态添加
- js实现往表格动态添加学生的学号、姓名、语数英的考试成绩和总分(总分不是填写),实现行与行之的颜色相间,高光的效果
- 项目经验:用js实现行动态添加效果
- vue.js 实现输入框动态添加功能
- 实现监听下拉具体达到显示和隐藏效果的js的核心代码
- JS函数实现动态添加CSS样式表文件
- 使用jquery动态添加的文本框和下拉框效果
- JS自定义功能函数实现动态添加网址参数修改网址参数值
- JS实现为动态创建的元素添加事件操作示例
- 用js实现的一个加载中状态的动态效果
- html页面中js添加遮盖层实现等待效果
- Js实现动态添加删除Table行
- JS脚本实现动态给标签控件添加事件的方法
- jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
- countUp.js 实现数字滚动 动态效果
- JS简单实现动态添加HTML标记的方法示例
- 在java中实现分页效果时,使用limit时,不能动态添加情况下的实现
- js实现的下拉链表的联动效果