登录  /  注册

jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

php中文网
发布: 2016-08-08 09:33:08
原创
1991人浏览过

 

 

效果图:

使用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>
登录后复制

  解析:

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 $().ready(<span>function<span>() { <span> 6 $('#searchable').<span>multiselect2side({ <span> 7 search: "待选区  搜索:" , <span> 8 selectedPosition: 'right', <span> 9 moveOptions: <span>false, <span>10 labelsx: '待选区', <span>11 labeldx: '已选区' <span>12 <span> }); <span>13 <span>14 <span> }); <span>15 </script><span>16</span> <form action="/admin/System/add?ac=insert" method="post" enctype="multipart/form-data">  <span>17</span> <select name="searchable[]" multiple><span>18</span> if condition="!empty(<span>$mod_user</span>)"&gt; <span>19</span> <option value="0">全部</option>
<span>20</span> <volist name="mod_user"><span>21</span> <option value="{&lt;span&gt;$vo&lt;/span&gt;.userid}">{<span>$vo</span>.nickname}</option>
<span>22</span> </volist><span>23</span> else /&gt; <span>24</span> <span> 未找到用户 </span><span>25</span> <span>if</span>&gt; <span>26</span> </select>
</form>

页面获取值使用  $ser=$_POST['</em>searchable<em><em>']; 获取的是数组类型option的value值</em></em>
登录后复制

方法二:使用jquery实现

<!--方法二,使用jQuery实现-->
<style type="text/css"> <span>#<span>one{width:200px; height:180px; float:left}<span> #<span>two{width:50px; height:180px; float:left}<span> #<span>three{width:200px; height:180px; float:left} .btn{width:50px; height:30px; margin-top:10px; cursor:<span>pointer;} </style><script type="text/javascript"> <span>//<span>下拉框交换JQuery   导入jQuery文件 $(<span>function<span>(){ <span>//<span>移到右边 $('#add').click(<span>function<span>() { <span>//<span>获取选中的选项,删除并追加给对方 $('#select1 option:selected').appendTo('#select2'<span>);
    }); <span>//<span>移到左边 $('#remove').click(<span>function<span>() {
        $('#select2 option:selected').appendTo('#select1'<span>);
    }); <span>//<span>全部移到右边 $('#add_all').click(<span>function<span>() { <span>//<span>获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'<span>);
    }); <span>//<span>全部移到左边 $('#remove_all').click(<span>function<span>() {
        $('#select2 option').appendTo('#select1'<span>);
    }); <span>//<span>双击选项 $('#select1').dblclick(<span>function(){ <span>//<span>绑定双击事件
        //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); <span>//<span>追加给对方 <span> }); <span>//<span>双击选项 $('#select2').dblclick(<span>function<span>(){
       $("option:selected",this).appendTo('#select1'<span>);
    });
}); </script><span> select下拉框内容交换开始</span>--&gt;
                                                    <!-- <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>function<span>(){
    $('#sub').click(<span>function<span>(){ <span>var uidlist=$('#searchable').<span>val(); <span>var midlist=$('#select4').<span>val(); <span>var content=$('#content').<span>val(); <span>var pushtime=$('#pushtime').<span>val(); <span>var image=$('#image').<span>val();
       $('#uidlist').<span>val(uidlist);



        });
}); </script>
登录后复制

 

 

以上就介绍了jQuery插件实现select下拉框左右选择_交换内容(multiselect2side),包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号