jQuery插件实现select下拉框左右选择_交换内容（multiselect2side），jqueryselect插件
- WBOY原創
- 2016-06-13 09:20:091622瀏覽
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