jq多选加文件预览_jQuery 多选列表框(multiple select)示例

参照《锋利的jquery》这本书的例子敲的代码，在项目中的应用是根据这例子来改造的，在此作一下笔记。

效果图，如下：

js代码：

复制代码 代码示例:

$(document).ready(function(){

$('#add').click(function(){

var $options = $('#select1 option:selected');//获取当前选中的项

var $remove = $options.remove();//删除下拉列表中选中的项

$remove.appendTo('#select2');//追加给对方

});

$('#remove').click(function(){

var $removeOptions = $('#select2 option:selected');

$removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成

});

$('#addAll').click(function(){

var $options = $('#select1 option');

$options.appendTo('#select2');

});

$('#removeAll').click(function(){

var $options = $('#select2 option');

$options.appendTo('#select1');

});

//双击事件

$('#select1').dblclick(function(){

//var $options = $('#select1 option:selected');

var $options = $('option:selected', this);//注意此处“option”与“:”之间的空格，有空格是不可以的

$options.appendTo('#select2');

});

$('#select2').dblclick(function(){

$('#select2 option:selected').appendTo('#select1');

});

});

jsp页面代码：

复制代码 代码示例:

选项一

选项二

选项三

选项四

选项五

选项六

选项七

选项八

选项九

选中添加到右边>>

<<选中添加到左边

全部添加到右边>>

<<全部添加到左边