jQuery实现Select左右复制移动内容


Posted in Javascript onAugust 05, 2016

引入的文件为<script type="text/javascript" src="jquery-1.10.2.js"></script>

双击也可以移动

[1].[代码]

<script type="text/javascript">
$(function(){
//移到右边
$("#add").click(function(){
//获取选中的选项,删除并追加给对方
$("#select1 option:selected").appendTo("#select2");
});
//移到左边
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1");
});
//全部移到右边
$("#add_all").click(function(){
//获取全部的选项,删除并追加给对放
$("#select1 option").appendTo("#select2");
});
//全部移到左边
$("#remove_all").click(function(){
$("#select2 option").appendTo("#select1");
});
//双击选项
$("#select1").dblclick(function(){//绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo("#select2");//追加给对方
});
//双击选项
$("#select2").dblclick(function(){
$("option:selected",this).appendTo("#select1");
});
})
</script>

[2].[代码]

<body>
<h1>Select JQuery 实现左右复制移动内容</h1>
<div style="width:500px;">
<div class="centent" style="float:left;">
<select multiple="multiple" id="select1" style="width:130px;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>
<button id="add" >选中添加到右边>></button><br>
<button id="add_all" >全部添加到右边>></button>
</div>
</div>
<div class="centent" style="padding-left:160px;">
<select multiple="multiple" id="select2" style="width: 130px;height:160px;">
</select>
<div>
<button id="remove"><<选中删除到左边</button><br>
<button id="remove_all"><<全部删除到左边</button>
</div>
</div>
</div>
</body>

[3].[图片]

jQuery实现Select左右复制移动内容

[4].[图片]

jQuery实现Select左右复制移动内容

以上所述是小编给大家介绍的jQuery实现Select左右移动复制内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
小程序实现列表删除功能
Oct 30 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 #Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 #Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 #Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 #Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 #Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 #Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 #Javascript
You might like
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
如何在python中使用selenium的示例
2017/12/26 Python
django 多数据库配置教程
2018/05/30 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Django实现跨域的2种方法
2019/07/31 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Pygame的程序开始示例代码
2020/05/07 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
审计主管岗位职责
2014/01/31 职场文书
小学教师国培感言
2014/02/08 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android