效果图：
使用jQuery插件—multiselect2side做法：
<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><body> <table> <tr> <td> 超级管理员 普通管理员 信息发布员 财务管理员 产品管理员 资源管理员 管理员 </td> </tr> <tr> <td></td> </tr> </table>
解析：
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 <link type=”text/css” href=”/Public/Css/jquery.multiselect2side.css” rel=”stylesheet” />
<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> <span>17</span> <span>18</span> <<span>if</span> condition="!empty(<span>$mod_user</span>)"> <span>19</span> 全部 <span>20</span> <span>21</span> <option value="{<span>$vo</span>.userid}">{<span>$vo</span>.nickname} <span>22</span> <span>23</span> <<span>else</span> /> <span>24</span> <span> 未找到用户 </span><span>25</span> </<span>if</span>> <span>26</span> 页面获取值使用 $ser=$_POST['</em>searchable<em><em>']; 获取的是数组类型option的value值</em></em>
方法二：使用jquery实现
<!---ecms 方法二，使用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>--> <!---ecms <table width="500" align="center" border="0" cellpadding="0" cellspacing="0" <span>class</span>="newContTab"> <tr> <td><div> <div> <em>/本2文来源[email protected]搞@^&代*@码2网</em><strong>搞gaodaima代码</strong> <<span>if</span> condition="!empty(<span>$mod_user</span>)"> 全部 <option value="{<span>$vo</span>.userid}">{<span>$vo</span>.nickname} <<span>else</span> /><span> 未找到用户 </span></<span>if</span>> </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> </div> </div></td> </tr> </table> <!---ecms select下拉框内容交换结束--> <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>
以上就介绍了jQuery插件实现select下拉框左右选择_交换内容（multiselect2side），包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）
转载请注明原文链接：jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）
