效果圖：
使用jQuery插件---multiselect2side做法：
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=utf-8" /> 5 <title>無標題文檔</title> 6 7 <link rel="stylesheet" href="jquery.multiselect2side.css" type="text/css" /> 8 <script type="text/javascript" src="jquery-1.6.4.min.js"></script> 9 <script type="text/javascript" src="jquery.multiselect2side.js"></script> 10 11 <script type="text/javascript"> 12 $().ready(function() { 13 $('#searchable').multiselect2side({ 14 search: "待選區 搜索：" , 15 selectedPosition: 'right', 16 moveOptions: false, 17 labelsx: '待選區', 18 labeldx: '已選區' 19 }); 20 }); 21 </script> 22 </head> 23 24 <body> 25 <table> 26 <tr> 27 <td> 28 <select name="searchable[]" id='searchable' multiple='multiple' > 29 <option value="超級管理員1">超級管理員</option> 30 <option value="普通管理員2">普通管理員</option> 31 <option value="信息發布員3">信息發布員</option> 32 <option value="財務管理員4">財務管理員</option> 33 <option value="產品管理員5">產品管理員</option> 34 <option value="資源管理員6">資源管理員</option> 35 <option value="管理員7">管理員</option> 36 </select> 37 </td> 38 </tr> 39 <tr> 40 <td><p id="stat"></p></td> 41 </tr> 42 </table> 43 44 </body> 45 </html>
解析：
head頭部導入
jquery.multiselect2side.css文件
jquery-1.6.4.min.js jquery文件
jquery.multiselect2side.js文件
**注意：jquery文件必須在jquery.multiselect2side.js之前導入
寫一個js調用multiselect2side方法，參數說明
search: "待選區 搜索："參數是添加搜索區
selectedPosition: 'right', 參數是添加右側的下拉框選擇項位置（必須）
moveOptions：移動選項，可以用來給選項排序，實際應用意義不大，這里設置為false
labelsx和labeldx是用來設置左右兩個列表框的標題，如果不需要可設置為空
maxSelected：最大選項數，即最多只能選擇幾項
項目 1 <link type="text/css" href="/Public/Css/jquery.multiselect2side.css" rel="stylesheet" />
1 <script type="text/javascript" src="/Public/Js/jquery-1.6.4.min.js"></script> 2 <script type="text/javascript" src="/Public/Js/jquery.multiselect2side.js"></script> 3 <script type="text/javascript"> 4 $().ready(function() { 5 $('#searchable').multiselect2side({ 6 search: "待選區 搜索：" , 7 selectedPosition: 'right', 8 moveOptions: false, 9 labelsx: '待選區', 10 labeldx: '已選區' 11 }); 12 13 }); 14 </script> 15 16 <form action="/admin/System/add?ac=insert" id="frm" method="post" enctype="multipart/form-data"> 17 <select name="searchable[]" id='searchable' multiple='multiple' > 18 <if condition="!empty($mod_user)"> 19 <option value="0">全部</option> 20 <volist name="mod_user" id="vo"> 21 <option value="{$vo.userid}">{$vo.nickname}</option> 22 </volist> 23 <else /> 24 未找到用戶 25 </if> 26 </select> 27 </form> 28 29 頁面獲取值使用 $ser=$_POST['searchable']; 獲取的是數組類型option的value值
方法二：使用jquery實現
1 <!--方法二，使用jQuery實現--> 2 <style type="text/css"> 3 #one{width:200px; height:180px; float:left} 4 #two{width:50px; height:180px; float:left} 5 #three{width:200px; height:180px; float:left} 6 .btn{width:50px; height:30px; margin-top:10px; cursor:pointer;} 7 </style> 8 <script type="text/javascript"> 9 //下拉框交換JQuery 導入jQuery文件 10 $(function(){ 11 //移到右邊 12 $('#add').click(function() { 13 //獲取選中的選項，刪除並追加給對方 14 $('#select1 option:selected').appendTo('#select2'); 15 }); 16 //移到左邊 17 $('#remove').click(function() { 18 $('#select2 option:selected').appendTo('#select1'); 19 }); 20 //全部移到右邊 21 $('#add_all').click(function() { 22 //獲取全部的選項,刪除並追加給對方 23 $('#select1 option').appendTo('#select2'); 24 }); 25 //全部移到左邊 26 $('#remove_all').click(function() { 27 $('#select2 option').appendTo('#select1'); 28 }); 29 //雙擊選項 30 $('#select1').dblclick(function(){ //綁定雙擊事件 31 //獲取全部的選項,刪除並追加給對方 32 $("option:selected",this).appendTo('#select2'); //追加給對方 33 }); 34 //雙擊選項 35 $('#select2').dblclick(function(){ 36 $("option:selected",this).appendTo('#select1'); 37 }); 38 }); 39 </script> 40 41 42 select下拉框內容交換開始--> 43 <!-- <table width="500" align="center" border="0" cellpadding="0" cellspacing="0" class="newContTab"> 44 <tr> 45 <td><div> 46 <div> 47 <select multiple="multiple" id="select1" style="width:150px;height:200px; float:left; border:4px #A0A0A4 outset; padding:4px; "> 48 49 <if condition="!empty($mod_user)"> 50 <option value="0">全部</option> 51 <volist name="mod_user" id="vo"> 52 <option value="{$vo.userid}">{$vo.nickname}</option> 53 </volist> 54 <else /> 55 未找到用戶 56 </if> 57 58 </select> 59 </div> 60 <div style="float:left;padding-left: 5px;"> <span id="add"> 61 <input type="button" class="btn" value=">"/> 62 </span><br /> 63 <span id="add_all"> 64 <input type="button" class="btn" value=">>"/> 65 </span> <br /> 66 <span id="remove"> 67 <input type="button" class="btn" value="<"/> 68 </span><br /> 69 <span id="remove_all"> 70 <input type="button" class="btn" value="<<"/> 71 </span> </div> 72 <div> 73 <select multiple="multiple" id="select2" style="width: 150px;height:200px; float:lfet;border:4px #A0A0A4 outset; padding:4px;"> 74 </select> 75 </div> 76 </div></td> 77 </tr> 78 </table> 79 <!--select下拉框內容交換結束--> 80 <input type="hidden" id="uidlist" name="uidlist" value="" /> 81 82 <script type="text/javascript"> 83 $(function(){ 84 $('#sub').click(function(){ 85 var uidlist=$('#searchable').val(); 86 var midlist=$('#select4').val(); 87 var content=$('#content').val(); 88 var pushtime=$('#pushtime').val(); 89 var image=$('#image').val(); 90 $('#uidlist').val(uidlist); 91 92 93 94 }); 95 }); 96 </script>