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 相关文章推荐
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
js实现日历与定时器
Feb 22 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 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
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
小程序实现多选框功能
2018/10/30 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python求众数问题实例
2014/09/26 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
金山毒霸系列的笔试题
2013/04/13 面试题
公司营业员的自我评价
2014/03/04 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
班组建设经验交流材料
2014/05/12 职场文书
学校搬迁方案
2014/06/15 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
导游词之镜泊湖
2019/12/09 职场文书