首先非常感谢网友小李的无私分享,此Jquery特效是一款非常实用的功能,前段时间Jquery学堂QQ群里有网友问起Jquery可不可以实现啊,当时没有去试一下还以为只有Winform才可以实现的,今天网友小李把他写的作品分享出来给大家用。
包括了以下功能:
1、单选操作
2、多选操作(按Ctrl+鼠标点击或按Shift+鼠标点击都可以)
3、双击当前选项也可添加
核心代码如下:
$(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');
});
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
角色选择 多选下拉框 三级联动 下拉框