您的位置:首页 > Web前端 > JQuery

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');
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: