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 EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
Javascript通过控制类名更改样式
May 24 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
咖啡知识大全
2021/03/03 新手入门
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python实现飞机大战项目
2020/03/11 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
党校学习思想汇报
2014/01/06 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
家长通知书家长评语
2014/04/17 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
长城导游词300字
2015/01/30 职场文书
会计专业自荐信范文
2015/03/05 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Java 定时任务技术趋势简介
2022/05/04 Java/Android