jQuery外掛實作select下拉方塊左右選擇_交換內容（multiselect2side）-php教程-PHP中文網

首頁

後端開發

php教程

jQuery外掛實作select下拉方塊左右選擇_交換內容（multiselect2side）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 08, 2016 am 09:33 AM

gtjqueryltoptionselect

效果圖：

使用jQuery外掛---multiselect2side做法：



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<link rel="stylesheet" href="jquery.multiselect2side.css" type="text/css">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.multiselect2side.js"></script>

<script type="text/javascript">
	$().ready(function() {
	     $('#searchable').multiselect2side({
		 search: "待选区　　搜索：" ,
		 selectedPosition: 'right',   
		 moveOptions: false,   
		 labelsx: '待选区',   
		 labeldx: '已选区'				
	     });		
	});
</script>

　　解析：

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

<em><span> 2</span> <script type="text/javascript" src="/Public/Js/jquery-1.6.4.min.js"></script> <span> 3</span> <script type="text/javascript" src="/Public/Js/jquery.multiselect2side.js"></script> <span> 4</span> <script type="text/javascript"> <span> 5 $().ready(<span>function<span>() { <span> 6 $('#searchable').<span>multiselect2side({ <span> 7 search: "待选区　　搜索：" , <span> 8 selectedPosition: 'right', <span> 9 moveOptions: <span>false, <span>10 labelsx: '待选区', <span>11 labeldx: '已选区' <span>12 <span> }); <span>13 <span>14 <span> }); <span>15 </script> <span>16</span> <form action="/admin/System/add?ac=insert" method="post" enctype="multipart/form-data">  <span>17</span> <select name="searchable[]" multiple> <span>18</span> if condition="!empty(<span>$mod_user</span>)"> <span>19</span> <option value="0">全部</option> <span>20</span> <volist name="mod_user"> <span>21</span> <option value="{<span>$vo</span>.userid}">{<span>$vo</span>.nickname}</option> <span>22</span> </volist> <span>23</span> else /> <span>24</span> <span> 未找到用户 </span><span>25</span> <span>if</span>> <span>26</span> </select>
</form>

页面获取值使用  $ser=$_POST['</em>searchable<em><em>']; 获取的是数组类型option的value值</em></em>

方法二：使用jquery實現

<!--方法二，使用jQuery实现-->
<style type="text/css"> <span>#<span>one{width:200px; height:180px; float:left}<span> #<span>two{width:50px; height:180px; float:left}<span> #<span>three{width:200px; height:180px; float:left} .btn{width:50px; height:30px; margin-top:10px; cursor:<span>pointer;} </style>
<script type="text/javascript"> <span>//<span>下拉框交换JQuery   导入jQuery文件 $(<span>function<span>(){ <span>//<span>移到右边 $('#add').click(<span>function<span>() { <span>//<span>获取选中的选项，删除并追加给对方 $('#select1 option:selected').appendTo('#select2'<span>);
    }); <span>//<span>移到左边 $('#remove').click(<span>function<span>() {
        $('#select2 option:selected').appendTo('#select1'<span>);
    }); <span>//<span>全部移到右边 $('#add_all').click(<span>function<span>() { <span>//<span>获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'<span>);
    }); <span>//<span>全部移到左边 $('#remove_all').click(<span>function<span>() {
        $('#select2 option').appendTo('#select1'<span>);
    }); <span>//<span>双击选项 $('#select1').dblclick(<span>function(){ <span>//<span>绑定双击事件
        //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); <span>//<span>追加给对方 <span> }); <span>//<span>双击选项 $('#select2').dblclick(<span>function<span>(){
       $("option:selected",this).appendTo('#select1'<span>);
    });
}); </script><span> select下拉框内容交换开始</span>-->
                                                    <!-- <table width="500" align="center" border="0" cellpadding="0" cellspacing="0" <span>class</span>="newContTab">
                                                          <tr>
                                                            <td><div>
                                                                <div>
                                                                  <select multiple="multiple">

                                                                <<span>if</span> condition="!empty(<span>$mod_user</span>)">
                                                                    <option value="0">全部</option> 
                                                                    <volist name="mod_user">
                                                                    <option value="{<span>$vo</span>.userid}">{<span>$vo</span>.nickname}</option>
                                                                    </volist>
                                                                <<span>else</span> /><span> 未找到用户 </span></<span>if</span>> 
                                                                    
                                                                  </select>
                                                                </div>
                                                                <div> <span>
                                                                  <input type="button" <span>class</span>="btn" value=">"/>
                                                                  </span><br />
                                                                  <span>
                                                                  <input type="button" <span>class</span>="btn" value=">>"/>
                                                                  </span> <br />
                                                                  <span>
                                                                  <input type="button" <span>class</span>="btn" value="<"/>
                                                                  </span><br />
                                                                  <span>
                                                                  <input type="button" <span>class</span>="btn" value="<<"/>
                                                                  </span> </div>
                                                                <div>
                                                                  <select multiple="multiple">
                                                                  </select>
                                                                </div>
                                                              </div></td>
                                                          </tr>
                                                        </table>
                                                        <!--select下拉框内容交换结束-->
                                                        <input type="hidden" name="uidlist" value="">

<script type="text/javascript"><span> $(<span>function<span>(){
    $('#sub').click(<span>function<span>(){ <span>var uidlist=$('#searchable').<span>val(); <span>var midlist=$('#select4').<span>val(); <span>var content=$('#content').<span>val(); <span>var pushtime=$('#pushtime').<span>val(); <span>var image=$('#image').<span>val();
       $('#uidlist').<span>val(uidlist);



        });
}); </script>

以上就介紹了jQuery插件實作select下拉框左右選擇_交換內容（multiselect2side），包括了方面的內容，希望對PHP教程有興趣的朋友有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

您如何修改PHP會話中存儲的數據？Apr 27, 2025 am 12:23 AM

tomodifyDataNaphPsession，startTheSessionWithSession_start（），然後使用$ _sessionToset，修改，orremovevariables.1）startThesession.2）setthesession.2）使用$ _session.3）setormodifysessessvariables.3）emovervariableswithunset（）

舉一個在PHP會話中存儲數組的示例。Apr 27, 2025 am 12:20 AM

在PHP會話中可以存儲數組。 1.啟動會話，使用session_start()。 2.創建數組並存儲在$_SESSION中。 3.通過$_SESSION檢索數組。 4.優化會話數據以提升性能。

垃圾收集如何用於PHP會議？Apr 27, 2025 am 12:19 AM

PHP會話垃圾回收通過概率機制觸發，清理過期會話數據。 1）配置文件中設置觸發概率和會話生命週期；2）可使用cron任務優化高負載應用；3）需平衡垃圾回收頻率與性能，避免數據丟失。

如何在PHP中跟踪會話活動？Apr 27, 2025 am 12:10 AM

PHP中追踪用戶會話活動通過會話管理實現。 1)使用session_start()啟動會話。 2)通過$_SESSION數組存儲和訪問數據。 3)調用session_destroy()結束會話。會話追踪用於用戶行為分析、安全監控和性能優化。

如何使用數據庫存儲PHP會話數據？Apr 27, 2025 am 12:02 AM

利用數據庫存儲PHP會話數據可以提高性能和可擴展性。 1）配置MySQL存儲會話數據：在php.ini或PHP代碼中設置會話處理器。 2）實現自定義會話處理器：定義open、close、read、write等函數與數據庫交互。 3）優化和最佳實踐：使用索引、緩存、數據壓縮和分佈式存儲來提升性能。

簡單地說明PHP會話的概念。Apr 26, 2025 am 12:09 AM

phpsessionstrackuserdataacrossmultiplepagerequestsusingauniqueIdStoredInAcookie.here'showtomanageThemeffectionaly：1）startAsessionWithSessionWwithSession_start（）和stordoredAtain $ _session.2）

您如何循環中存儲在PHP會話中的所有值？Apr 26, 2025 am 12:06 AM

在PHP中，遍歷會話數據可以通過以下步驟實現：1.使用session_start()啟動會話。 2.通過foreach循環遍歷$_SESSION數組中的所有鍵值對。 3.處理複雜數據結構時，使用is_array()或is_object()函數，並用print_r()輸出詳細信息。 4.優化遍歷時，可採用分頁處理，避免一次性處理大量數據。這將幫助你在實際項目中更有效地管理和使用PHP會話數據。