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.         $('#remove').click(function(){  
9.             var $removeOptions = $('#select2 option:selected');  
10.             $removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成  
11.         });  
12.         $('#addAll').click(function(){  
13.             var $options = $('#select1 option');  
14.             $options.appendTo('#select2');  
15.         });  
16.         $('#removeAll').click(function(){  
17.             var $options = $('#select2 option');  
18.             $options.appendTo('#select1');  
19.         });  
20.         //輕按兩下事件  
21.         $('#select1').dblclick(function(){  
22.             //var $options = $('#select1 option:selected');  
23.             var $options = $('option:selected', this);//注意此處“option”與“:”之間的空格，有空格是不可以的  
24.             $options.appendTo('#select2');  
25.         });  
26.         $('#select2').dblclick(function(){  
27.             $('#select2 option:selected').appendTo('#select1');  
28.         });  
29.     });  
30. </script>