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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
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 fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
jQuery操作cookie
2016/08/08 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python subprocess库的使用详解
2018/10/26 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python如何实现邮件功能
2020/05/27 Python
python利用faker库批量生成测试数据
2020/10/15 Python
Spy++的使用方法及下载教程
2021/01/29 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
母亲节感恩活动记录
2014/03/16 职场文书
2016春节放假通知范文
2015/08/18 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python