jquery实现下拉框左右选择功能


Posted in Javascript onFebruary 21, 2017

1、说明

本文demo实现下拉框左右选择

2、代码

<!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>
 <style type="text/css">
 .centent
 {
 width: 260px;
 }
 .cententl
 {
 float: left;
 }

 .btnAdd
 {
 float: left;
 padding:30px 5px;
 }
 </style>
 <script src="scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 //移到右边
 $('#btnAdd').click(function () {
 //获取选中的选项,删除自己并追加给对方
 $('#select1 option:selected').appendTo('#select2');
 });
 //移到左边
 $('#btnDel').click(function () {
 //获取选中的选项,删除自己并追加给对方
 $('#select2 option:selected').appendTo('#select1');
 });
 //全部移到右边
 $('#btnAdds').click(function () {
 //获取全部的选项,删除自己并追加给对方
 $('#select1 option').appendTo('#select2');
 });
 //全部移到左边
 $('#btnDels').click(function () {
 //获取全部的选项,删除自己并追加给对方
 $('#select2 option').appendTo('#select1');
 });
 //双击选项
 $('#select1').dblclick(function () {
 //获取双击的选项,删除自己并追加给对方
 $("option:selected", this).appendTo('#select2');
 });
 //双击选项
 $('#select2').dblclick(function () {
 //获取双击的选项,删除自己并追加给对方
 $("option:selected", this).appendTo('#select1');
 });
 });
 </script>
</head>
<body>
 <div class="centent">
 <div class="cententl">
 <select multiple="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>
 <option value="7">课程7</option>
 <option value="8">课程8</option>
 </select>
 </div>
 <div class="btnAdd">
 <input type="button" id="btnAdd" value=" > " /><br />
 <input type="button" id="btnDel" value=" < " /><br />
 <input type="button" id="btnAdds" value=">>" /><br />
 <input type="button" id="btnDels" value="<<" />
 </div>
 <div>
 <select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
 </select>
 </div>
 </div>
</body>
</html>

jquery实现下拉框左右选择功能

图(1)

jquery实现下拉框左右选择功能

图(2)

jquery实现下拉框左右选择功能

图(3)

3、Demo

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
javascript解析json实例详解
Nov 05 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
js中创建对象的几种方式
Feb 05 Javascript
eslint 的三大通用规则详解
May 16 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
jquery实现页面加载效果
Feb 21 #Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 #Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 #Javascript
从零学习node.js之文件操作(三)
Feb 21 #Javascript
You might like
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php实现加减法验证码代码
2014/02/14 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
vue打包后显示空白正确处理方法
2017/11/01 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
英国电气世界:Electrical World
2019/09/08 全球购物
学校联谊活动方案
2014/02/15 职场文书
服装采购员岗位职责
2014/03/15 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
学雷锋宣传标语
2014/06/25 职场文书
python基础之模块的导入
2021/10/24 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android