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


Posted in Javascript onApril 03, 2013

效果展示:

页面初加载时:      JS实现下拉框的动态添加(附效果)

选择车类型后:      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(); 
} 
}); 
});
Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
js实现随机点名程序
Sep 17 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 #Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 #Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 #Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 #Javascript
JS获取浏览器版本及名称实现函数
Apr 02 #Javascript
js 火狐下取本地路径实现思路
Apr 02 #Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 #Javascript
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
python实现学生通讯录管理系统
2021/02/25 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
医院护士的求职信
2014/01/03 职场文书
超市店庆活动方案
2014/08/31 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
学习nginx基础知识
2021/09/04 Servers
Java 关于String字符串原理上的问题
2022/04/07 Java/Android