Home > Article > Backend Development > jQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side)
jQuery plug-in implements left and right selection of select drop-down box_exchange content (multiselect2side)
- WBOYOriginal
- 2016-08-08 09:33:082149browse
Rendering:
Use the 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[]" 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>
Analysis:
head head import
jquery.multiselect2side.css file
jquery-1.6.4.min.js jquery file
jquery.multiselect2side.js file
**Note: jquery files must be imported before jquery.multiselect2side.js
Write a js to call the multiselect2side method, parameter description
search: "To be selected area Search:" The parameter is to add a search area
selectedPosition: 'right', the parameter is the position of the drop-down box selection on the right (required)
moveOptions: Move options, which can be used to sort options. It has little practical significance. It is set to false here
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> <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>
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">
<<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>
The above introduces the jQuery plug-in to implement the left and right selection_exchange content of the select drop-down box (multiselect2side), including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：PHP design patterns (2)Next article：PHP design patterns (2)