지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > PHP 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-08-08 09:33:08
원래의
2164명이 탐색했습니다.

​

​

표현:

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: 최대 옵션 수, 즉 최대 몇 개만 선택할 수 있습니다.

프로젝트

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</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 튜토리얼에 관심이 있는 친구들에게 도움이 되길 바랍니다.

관련 라벨：
gt jquery lt option select
원천：php.cn
이전 기사：PHP 디자인 패턴(2) 다음 기사：PHP 매직 메소드: __isset 및 __unset
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
그리드를 사용하여 특정 디자인 만들기: 단계별 가이드 이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 그렇게 할 수 없습니다. <ulclass="container"...
에서 2024-04-06 20:29:08
0
2
492
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿