jQuery插件实现select下拉框左右选择_交换内容（multiselect2side），jqueryselect插件

집

백엔드 개발

PHP 튜토리얼

jQuery插件实现select下拉框左右选择_交换内容（multiselect2side），jqueryselect插件_PHP教程

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 13, 2016 am 10:13 AM

트리 구조

jQuery插件实现select下拉框左右选择_交换内容（multiselect2side），jqueryselect插件

效果图：

使用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[]" id='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 id="stat"></p></td>
       </tr>
   </table>
	
</body>
</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

<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> <br />   <form action="/admin/System/add?ac=insert" id="frm" method="post" enctype="multipart/form-data"> 
<span>17</span> <select name="searchable[]" id='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" id="vo">
<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><br /></form><br /><br />页面获取值使用  $ser=$_POST['</em>searchable<em id="__mceDel"><em id="__mceDel">']; 获取的是数组类型option的value值</em></em>

로그인 후 복사

方法二：使用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" id="select1">if</span> condition="!empty(<span>$mod_user</span>)">
                                                                    <option value="0">全部</option> 
                                                                    <volist name="mod_user" id="vo">
                                                                    <option value="{<span>$vo</span>.userid}">{<span>$vo</span>.nickname}</option>
                                                                    </volist>
                                                                <<span>else</span> /><span>
                                                                    未找到用户
                                                                </span></<span>if</span>> 
                                                                    
                                                                  </select>
                                                                </div>
                                                                <div>class</span>="btn" value=">"/>
                                                                  </span><br />
                                                                  <span id="add_all">
                                                                  <input type="button" <span>class</span>="btn" value=">>"/>
                                                                  </span> <br />
                                                                  <span id="remove">
                                                                  <input type="button" <span>class</span>="btn" value="<"/>
                                                                  </span><br />
                                                                  <span id="remove_all">
                                                                  <input type="button" <span>class</span>="btn" value="<<"/>
                                                                  </span> </div>
                                                                <div>
                                                                  <select multiple="multiple" id="select2">
$(</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>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7461

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Laravel의 플래시 세션 데이터로 작업합니다 Mar 12, 2025 pm 05:08 PM

Laravel은 직관적 인 플래시 방법을 사용하여 임시 세션 데이터 처리를 단순화합니다. 응용 프로그램에 간단한 메시지, 경고 또는 알림을 표시하는 데 적합합니다. 데이터는 기본적으로 후속 요청에만 지속됩니다. $ 요청-

PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법 Mar 14, 2025 am 11:42 AM

PHP 클라이언트 URL (CURL) 확장자는 개발자를위한 강력한 도구이며 원격 서버 및 REST API와의 원활한 상호 작용을 가능하게합니다. PHP CURL은 존경받는 다중 프로모토콜 파일 전송 라이브러리 인 Libcurl을 활용하여 효율적인 execu를 용이하게합니다.

Laravel 테스트에서 단순화 된 HTTP 응답 조롱 Mar 12, 2025 pm 05:09 PM

Laravel은 간결한 HTTP 응답 시뮬레이션 구문을 제공하여 HTTP 상호 작용 테스트를 단순화합니다. 이 접근법은 테스트 시뮬레이션을보다 직관적으로 만들면서 코드 중복성을 크게 줄입니다. 기본 구현은 다양한 응답 유형 단축키를 제공합니다. Illuminate \ support \ Facades \ http를 사용하십시오. http :: 가짜 ([ 'google.com'=> 'Hello World', 'github.com'=> [ 'foo'=> 'bar'], 'forge.laravel.com'=>