jQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side), jqueryselect plug-in

jQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side), jqueryselect plug-in_PHP tutorial

WBOY

Release： 2016-07-13 10:13:07

Original

1042 people have browsed it

jQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side), jqueryselect plug-in

Rendering:

Use jQuery plug-in ---multiselect2side method:

<!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>

Copy after login

Analysis:

head header import
jquery.multiselect2side.css file
jquery-1.6.4.min.js jquery file
jquery.multiselect2side.js file
**Note: jquery file must be in Import before jquery.multiselect2side.js

Write a js to call the multiselect2side method, parameter description
search: "Search for the selected area:" The parameter is to add the search area
selectedPosition: 'right', the parameter is to add the right drop-down box selection position (required )
moveOptions: Move options, which can be used to sort options. It has little practical significance. Here it is set to false
labelsx and labeldx are used to set the titles of the left and right list boxes. If not needed, they can be set to Empty
maxSelected: The maximum number of options, that is, only a few can be selected at most

Project 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>

Copy after login

Method 2: Use jquery to implement

<!--方法二，使用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>

Copy after login