jQuery实现多选下来框(multiple select)

 

js代码： 

Js代码  

1. <script type="text/javascript">  
2.     $(document).ready(function(){  
3.         $('#add').click(function(){  
4.             var $options = $('#select1 option:selected');//获取当前选中的项  
5.             var $remove = $options.remove();//删除下拉列表中选中的项  
6.             $remove.appendTo('#select2');//追加给对方  
7.         });  
8.           
9.         $('#remove').click(function(){  
10.             var $removeOptions = $('#select2 option:selected');  
11.             $removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成  
12.         });  
13.           
14.         $('#addAll').click(function(){  
15.             var $options = $('#select1 option');  
16.             $options.appendTo('#select2');  
17.         });  
18.           
19.         $('#removeAll').click(function(){  
20.             var $options = $('#select2 option');  
21.             $options.appendTo('#select1');  
22.         });  
23.           
24.         //双击事件  
25.         $('#select1').dblclick(function(){  
26.             //var $options = $('#select1 option:selected');  
27.             var $options = $('option:selected', this);//注意此处“option”与“:”之间的空格，有空格是不可以的  
28.             $options.appendTo('#select2');  
29.         });  
30.           
31.         $('#select2').dblclick(function(){  
32.             $('#select2 option:selected').appendTo('#select1');  
33.         });  
34.           
35.     });  
36. </script>