jQuery 플러그인은 선택 드롭다운 box_exchange 콘텐츠의 왼쪽 및 오른쪽 선택을 구현합니다(multiselect2side).-PHP 튜토리얼-php.cn

jQuery 플러그인은 선택 드롭다운 box_exchange 콘텐츠의 왼쪽 및 오른쪽 선택을 구현합니다(multiselect2side).

WBOY

풀어 주다： 2016-08-08 09:33:08

원래의

2192명이 탐색했습니다.

표현:

jQuery 플러그인 ---multiselect2side 메소드를 사용하십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>

<body>
	<table>
       <tr>
	   <td>
	 	<select name="searchable[]" multiple='multiple' >
		 <option value="超级管理员1">超级管理员</option>
                 <option value="普通管理员2">普通管理员</option>
                 <option value="信息发布员3">信息发布员</option>
                 <option value="财务管理员4">财务管理员</option>
                 <option value="产品管理员5">产品管理员</option>
                 <option value="资源管理员6">资源管理员</option>
                 <option value="管理员7">管理员</option>
		</select>
	   </td>
       </tr>
       <tr>
	   <td><p></p></td>
       </tr>
   </table>
	
</body>
</html>

로그인 후 복사

분석:

헤드 헤드 임포트
jquery.multiselect2side.css 파일
jquery-1.6.4.min.js jquery 파일
jquery.multiselect2side.js 파일
**참고: jquery.multiselect2side.js보다 먼저 jquery 파일을 가져와야 합니다.

multiselect2side 메소드를 호출하는 js 작성, 매개변수 설명
검색: "선택할 영역 검색:" 매개변수는 검색 영역을 추가하는 것입니다
selectedPosition: 'right', 매개변수는 오른쪽 드롭다운 상자 선택 위치를 추가하는 것입니다(필수)
moveOptions: 옵션을 정렬하는 데 사용할 수 있는 이동 옵션입니다. 여기서는 false로 설정되어 있습니다. labelsx 및 labeldx는 왼쪽 및 오른쪽 목록 상자의 제목을 설정하는 데 사용됩니다. 필요하지 않은 경우 비어 있도록 설정할 수 있습니다
maxSelected: 최대 옵션 수, 즉 최대 몇 개만 선택할 수 있습니다.

프로젝트

<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</span> $().ready(<span>function</span><span>() { </span><span> 6</span> $('#searchable').<span>multiselect2side({ </span><span> 7</span> search: "待选区　　搜索：" , <span> 8</span> selectedPosition: 'right', <span> 9</span> moveOptions: <span>false</span>, <span>10</span> labelsx: '待选区', <span>11</span> labeldx: '已选区' <span>12</span> <span> }); </span><span>13</span> <span>14</span> <span> }); </span><span>15</span> </script> <span>16</span> <form action="/admin/System/add?ac=insert" method="post" enctype="multipart/form-data">  <span>17</span> <select name="searchable[]" multiple='multiple' > <span>18</span> <<span>if</span> 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> <<span>else</span> /> <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>

로그인 후 복사

방법 2: jquery를 사용하여 구현

<!--方法二，使用jQuery实现-->
<style type="text/css"> <span>#</span><span>one{width:200px; height:180px; float:left}</span><span> #</span><span>two{width:50px; height:180px; float:left}</span><span> #</span><span>three{width:200px; height:180px; float:left}</span> .btn{width:50px; height:30px; margin-top:10px; cursor:<span>pointer;} </span></style>
<script type="text/javascript"> <span>//</span><span>下拉框交换JQuery   导入jQuery文件</span> $(<span>function</span><span>(){ </span><span>//</span><span>移到右边</span> $('#add').click(<span>function</span><span>() { </span><span>//</span><span>获取选中的选项，删除并追加给对方</span> $('#select1 option:selected').appendTo('#select2'<span>);
    }); </span><span>//</span><span>移到左边</span> $('#remove').click(<span>function</span><span>() {
        $(</span>'#select2 option:selected').appendTo('#select1'<span>);
    }); </span><span>//</span><span>全部移到右边</span> $('#add_all').click(<span>function</span><span>() { </span><span>//</span><span>获取全部的选项,删除并追加给对方</span> $('#select1 option').appendTo('#select2'<span>);
    }); </span><span>//</span><span>全部移到左边</span> $('#remove_all').click(<span>function</span><span>() {
        $(</span>'#select2 option').appendTo('#select1'<span>);
    }); </span><span>//</span><span>双击选项</span> $('#select1').dblclick(<span>function</span>(){ <span>//</span><span>绑定双击事件
        //获取全部的选项,删除并追加给对方</span> $("option:selected",this).appendTo('#select2'); <span>//</span><span>追加给对方</span> <span> }); </span><span>//</span><span>双击选项</span> $('#select2').dblclick(<span>function</span><span>(){
       $(</span>"option:selected",this).appendTo('#select1'<span>);
    });
}); </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><span>function</span><span>(){
    $(</span>'#sub').click(<span>function</span><span>(){ </span><span>var</span> uidlist=$('#searchable').<span>val(); </span><span>var</span> midlist=$('#select4').<span>val(); </span><span>var</span> content=$('#content').<span>val(); </span><span>var</span> pushtime=$('#pushtime').<span>val(); </span><span>var</span> image=$('#image').<span>val();
       $(</span>'#uidlist').<span>val(uidlist);



        });
}); </span></script>

로그인 후 복사

위 내용은 관련 내용을 포함하여 선택 드롭다운 상자(multiselect2side)의 왼쪽 및 오른쪽 Selection_exchange 내용을 구현하기 위한 jQuery 플러그인을 소개한 내용입니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되길 바랍니다.