jQuery实现下拉框功能实例代码


Posted in Javascript onMay 06, 2016

说一百句,不如我给大家贴张效果图,效果图请看下面:

jQuery实现下拉框功能实例代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

div.centent {
float: left;
text-align: center;
margin: 10px;
}

span {
display: block;
margin: 2px 2px;
padding: 4px 10px;
background: #898989;
cursor: pointer;
font-size: 12px;
color: white;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function () {
$("#add").click(function () {//单个添加
var $options = $("#select1 option:selected");
$options.appendTo("#select2");
});
$("#add_all").click(function () {//全部添加
$("#select1 option").each(function () {
$(this).appendTo("#select2");
/*
也可以写为:
var p=$("#select1 option");
p.appendTo("#select2");
*/
});
});
$("#remove").click(function () {//同上,只不过方向相反
var $options = $("#select2 option:selected");
// var $remove = $options.remove();
$options.appendTo("#select1");
});
$("#remove_all").click(function () {//同上,只不过方向相反
var p = $("#select2 option");
p.appendTo("#select1");
});
});

</script>
</head>
<body>
<div class="centent">
<select multiple id="select1" style="width:100px;height:160px">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
</select>

<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>;></span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width:100px;height:160px"></select>

<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>

以上内容是小编给大家介绍的jquery 下拉框功能实例,希望对大家有所帮助!

Javascript 相关文章推荐
纯js实现手风琴效果代码
Apr 17 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
js的三种继承方式详解
Jan 21 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
基于JavaScript实现多级菜单效果
Jul 25 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
JS实现打字游戏
Dec 17 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
jQuery 实现评论等级好评差评特效
May 06 #Javascript
Node.js插件安装图文教程
May 06 #Javascript
node.js插件nodeclipse安装图文教程
Oct 19 #Javascript
javascript实现平滑无缝滚动
Aug 09 #Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 #Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 #Javascript
You might like
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python入门篇之面向对象
2014/10/20 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python实现将文本转换成语音的方法
2015/05/28 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python学生信息管理系统实现代码
2019/12/17 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
详解python变量与数据类型
2020/08/25 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
情人节寄语大全
2014/04/11 职场文书
家长对孩子的评语
2014/04/18 职场文书
安全生产月演讲稿
2014/05/09 职场文书
法院信息化建设方案
2014/05/21 职场文书
物流专业自荐信
2014/05/23 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
顶岗实习协议书
2015/01/29 职场文书
公司仓库管理制度
2015/08/04 职场文书
《海上日出》教学反思
2016/02/23 职场文书
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS