jquery 实现左右栏框选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>demo</title> 6 <script src="jquery-1.4.4.min.js"></script> 7 <script> 8 $(function(){ 9 //选择一项 10 $("#addOne").click(function(){ 11 $("#from option:selected").clone().appendTo("#to"); 12 $("#from option:selected").remove(); 13 }); 14 15 //选择全部 16 $("#addAll").click(function(){ 17 $("#from option").clone().appendTo("#to"); 18 $("#from option").remove(); 19 }); 20 21 //移除一项 22 $("#removeOne").click(function(){ 23 $("#to option:selected").clone().appendTo("#from"); 24 $("#to option:selected").remove(); 25 }); 26 27 //移除全部 28 $("#removeAll").click(function(){ 29 $("#to option").clone().appendTo("#from"); 30 $("#to option").remove(); 31 }); 32 33 //移至顶部 34 $("#Top").click(function(){ 35 var allOpts = $("#to option"); 36 var selected = $("#to option:selected"); 37 38 if(selected.get(0).index!=0){ 39 for(i=0;i<selected.length;i++){ 40 var item = $(selected.get(i)); 41 var top = $(allOpts.get(0)); 42 item.insertBefore(top); 43 } 44 } 45 }); 46 47 //上移一行 48 $("#Up").click(function(){ 49 var selected = $("#to option:selected"); 50 if(selected.get(0).index!=0){ 51 selected.each(function(){ 52 $(this).prev().before($(this)); 53 }); 54 } 55 }); 56 57 //下移一行 58 $("#Down").click(function(){ 59 var allOpts = $("#to option"); 60 var selected = $("#to option:selected"); 61 62 if(selected.get(selected.length-1).index!=allOpts.length-1){ 63 for(i=selected.length-1;i>=0;i--){ 64 var item = $(selected.get(i)); 65 item.insertAfter(item.next()); 66 } 67 } 68 }); 69 70 //移至底部 71 $("#Buttom").click(function(){ 72 var allOpts = $("#to option"); 73 var selected = $("#to option:selected"); 74 75 if(selected.get(selected.length-1).index!=allOpts.length-1){ 76 for(i=selected.length-1;i>=0;i--){ 77 var item = $(selected.get(i)); 78 var buttom = $(allOpts.get(length-1)); 79 item.insertAfter(buttom); 80 } 81 } 82 }); 83 }); 84 </script> 85 </head> 86 <body> 87 <table align="center" width="288" border="0" cellpadding="0" cellspacing="0"> 88 <tr> 89 <td colspan="4"> 90 <select name="from" id="from" multiple="multiple" size="10" style="width:100%"> 91 <option value="1">选项1</option> 92 <option value="2">选项2</option> 93 <option value="3">选项3</option> 94 <option value="4">选项4</option> 95 <option value="5">选项5</option> 96 <option value="6">选项6</option> 97 <option value="7">选项7</option> 98 </select> 99 </td> 100 <td align="center"> 101 <input type="button" id="addAll" value=" >> " style="width:50px;" /><br /> 102 <input type="button" id="addOne" value=" > " style="width:50px;" /><br /> 103 <input type="button" id="removeOne" value="<" style="width:50px;" /><br /> 104 <input type="button" id="removeAll" value="<<" style="width:50px;" /><br /> 105 </td> 106 <td colspan="4"> 107 <select name="to" id="to" multiple="multiple" size="10" style="width:100%"> 108 </select> 109 </td> 110 <td align="center"> 111 <input type="button" id="Top" value="置顶" style="width:50px;" /><br /> 112 <input type="button" id="Up" value="上移" style="width:50px;" /><br /> 113 <input type="button" id="Down" value="下移" style="width:50px;" /><br /> 114 <input type="button" id="Buttom" value="置底" style="width:50px;" /><br /> 115 </td> 116 </tr> 117 </table> 118 </body> 119 </html>
PS:只能的话还可以加入双击下拉框选项
1 $('#select1').dblclick(function(){ //绑定双击事件 2 //获取全部的选项,删除并追加给对方 3 $("option:selected",this).appendTo('#select2'); //追加给对方 4 }); 5 //双击选项 6 $('#select2').dblclick(function(){ 7 $("option:selected",this).appendTo('#select1'); 8 });
附上插件官网地址（multiselect2side plugin）：http://www.senamion.com/blog/jmultiselect2side.html
