当前位置: 编程技术>jquery
jQuery 多选列表框(multiple select)示例
来源: 互联网 发布时间:2014-10-04
本文导语: 参照《锋利的jQuery》这本书的例子敲的代码,在项目中的应用是根据这例子来改造的,在此作一下笔记。 效果图,如下: js代码: 代码示例: $(document).ready(function(){ $('#add').click(function(){ ...
参照《锋利的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页面代码:
代码示例:
选项一
选项二
选项三
选项四
选项五
选项六
选项七
选项八
选项九
选中添加到右边>>
<<选中添加到左边
全部添加到右边>>
<<全部添加到左边