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 相关文章推荐
JQuery开发的数独游戏代码
Oct 29 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
javascript解析json数据的3种方式
May 08 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php5中类的学习
2008/03/28 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
Vue 组件间的样式冲突污染
2017/08/31 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python多进程并发demo实例解析
2019/12/13 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
什么是事务?事务有哪些性质?
2012/03/11 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
庆八一活动方案
2014/01/25 职场文书
校园绿化美化方案
2014/06/08 职场文书
教师创先争优承诺书
2015/04/27 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
python 远程执行命令的详细代码
2022/02/15 Python