JQUERY双下拉框内容的左右移动
2013-12-05 11:25
218 查看
教程源码:http://bbs.php100.com/read-htm-tid-74060.html
用到的方法为:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数
$(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');
});
});
相关文章推荐
- select选择框内容左右移动添加删除栏(升级)
- jquery实现select多选框中内容的左右移动
- jQuery实现选项内容的左右移动效果
- jquery实现select选择框内容左右移动代码分享
- jquery实现select选择框内容左右移动代码分享
- 用jquery实现选项内容的左右移动
- 基于jquery实现select选择框内容左右移动添加删除代码分享
- 两个Listbox内容左右互相移动
- 基于jquery实现select选择框内容左右移动添加删除代码分享
- jquery鼠标移动div内容上下左右滚动
- 超级简单实现内容的左右移动js+jquery+html
- 下拉框内容左右移动效果.html
- 关于列表中内容的左右移动
- jquery实现下拉框内容左右移动
- jQuery中将左右两个列表框的内容相互移动
- 读取并修改元素的内容:选中项左右移动
- jquery学习之1.17-小练习2-左右选项框内容移动
- Select JQuery 实现左右复制移动内容
- 下拉框内容左右移动效果