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

时间：2023-01-07 22:48:47

效果图：

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

使用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 <link type="text/css" href="/Public/Css/jquery.multiselect2side.css" rel="stylesheet" />

 <script type="text/javascript" src="/Public/Js/jquery-1.6.4.min.js"></script>

 <script type="text/javascript" src="/Public/Js/jquery.multiselect2side.js"></script>

 <script type="text/javascript">

         $().ready(function() {

             $('#searchable').multiselect2side({

                 search: "待选区　　搜索：" ,

                 selectedPosition: 'right',

                 moveOptions: false,

                 labelsx: '待选区',

                 labeldx: '已选区'

             }); 

         });

 </script>

    <form action="/admin/System/add?ac=insert" id="frm" method="post" enctype="multipart/form-data">

 <select name="searchable[]" id='searchable' multiple='multiple' >

      <if condition="!empty($mod_user)">

            <option value="0">全部</option>

          <volist name="mod_user" id="vo">

            <option value="{$vo.userid}">{$vo.nickname}</option>

          </volist>

     <else />

         未找到用户

     </if>

 </select>

 </form>

 页面获取值使用  $ser=$_POST['searchable']; 获取的是数组类型option的value值

方法二：使用jquery实现

 <!--方法二，使用jQuery实现-->

 <style type="text/css">

 #one{width:200px; height:180px; float:left}

 #two{width:50px; height:180px; float:left}

 #three{width:200px; height:180px; float:left}

 .btn{width:50px; height:30px; margin-top:10px; cursor:pointer;}

 </style>

 <script type="text/javascript">

 //下拉框交换JQuery   导入jQuery文件

 $(function(){

     //移到右边

     $('#add').click(function() {

     //获取选中的选项，删除并追加给对方

         $('#select1 option:selected').appendTo('#select2');

     });

     //移到左边

     $('#remove').click(function() {

         $('#select2 option:selected').appendTo('#select1');

     });

     //全部移到右边

     $('#add_all').click(function() {

         //获取全部的选项,删除并追加给对方

         $('#select1 option').appendTo('#select2');

     });

     //全部移到左边

     $('#remove_all').click(function() {

         $('#select2 option').appendTo('#select1');

     });

     //双击选项

     $('#select1').dblclick(function(){ //绑定双击事件

         //获取全部的选项,删除并追加给对方

         $("option:selected",this).appendTo('#select2'); //追加给对方

     });

     //双击选项

     $('#select2').dblclick(function(){

        $("option:selected",this).appendTo('#select1');

     });

 });

 </script>

 select下拉框内容交换开始-->

                                                     <!-- <table width="500" align="center" border="0" cellpadding="0" cellspacing="0" class="newContTab">

                                                           <tr>

                                                             <td><div>

                                                                 <div>

                                                                   <select multiple="multiple" id="select1" style="width:150px;height:200px; float:left; border:4px #A0A0A4 outset; padding:4px; ">

                                                                 <if condition="!empty($mod_user)">

                                                                     <option value="0">全部</option>

                                                                     <volist name="mod_user" id="vo">

                                                                     <option value="{$vo.userid}">{$vo.nickname}</option>

                                                                     </volist>

                                                                 <else />

                                                                     未找到用户

                                                                 </if> 

                                                                   </select>

                                                                 </div>

                                                                 <div style="float:left;padding-left: 5px;"> <span id="add">

                                                                   <input type="button" class="btn" value=">"/>

                                                                   </span><br />

                                                                   <span id="add_all">

                                                                   <input type="button" class="btn" value=">>"/>

                                                                   </span> <br />

                                                                   <span id="remove">

                                                                   <input type="button" class="btn" value="<"/>

                                                                   </span><br />

                                                                   <span id="remove_all">

                                                                   <input type="button" class="btn" value="<<"/>

                                                                   </span> </div>

                                                                 <div>

                                                                   <select multiple="multiple" id="select2" style="width: 150px;height:200px; float:lfet;border:4px #A0A0A4 outset; padding:4px;">

                                                                   </select>

                                                                 </div>

                                                               </div></td>

                                                           </tr>

                                                         </table>

                                                         <!--select下拉框内容交换结束-->

                                                         <input type="hidden" id="uidlist" name="uidlist" value="" />

 <script type="text/javascript">

 $(function(){

     $('#sub').click(function(){

        var uidlist=$('#searchable').val();

        var midlist=$('#select4').val();

         var content=$('#content').val();

         var pushtime=$('#pushtime').val();

         var image=$('#image').val();

        $('#uidlist').val(uidlist);

         });

 });

 </script>

jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）的更多相关文章

  1. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  2. js&amp&semi;jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  3. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  4. jQuery操作选中select下拉框的值

    js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 ...

  5. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  6. 获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  7. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  8. jQuery动态生成&lt&semi;select&gt&semi;下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

  9. element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑

    这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题. 这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题, ...

随机推荐

  1. java 抽象类与接口的区别

    在Java 语言中, abstract class 和interface 是支持抽象类 定义的两种机制.正是由于这两种机制的存在,才赋予 了Java强大的 面向对象能力.abstract class和 ...

  2. Linux转发性能评估与优化-转发瓶颈分析与解决方式&lpar;补遗&rpar;

    补遗 关于网络接收的软中断负载均衡,已经有了成熟的方案,可是该方案并不特别适合数据包转发,它对server的小包处理非常好.这就是RPS.我针对RPS做了一个patch.提升了其转发效率. 下面是我转 ...

  3. WPF刷新界面之坎坷路

    WPF刷新界面之坎坷路 项目需要一个硬件检测功能,需要用到界面刷新,刚开始想用个定时器,对检测过的硬设定时添加后刷新界面. 但是很遗憾,定时器并不能进行刷新.后台检测List数据里面已经添加了很多了很 ...

  4. 获得正在编辑行的数据 esayui datagrid

    function getEditRow(datagridId) {//datagridId为table容器的id var input = $('#' + datagridId).parent().fi ...

  5. Python cffi学习

    cffi是连接Python与c的桥梁,可实现在Python中调用c文件.cffi为c语言的外部接口,在Python中使用该接口可以实现在Python中使用外部c文件的数据结构及函数. 由于资料较少,所 ...

  6. CGAffineTransform 缩放 &sol; 旋转 &sol; 平移

    CGAffineTransform此类是一个3*3矩阵的变换. - (void)transformImageView { CGAffineTransform t = CGAffineTransform ...

  7. python自定义安装包

    python的第三方模块越来越丰富,涉及的领域也非常广,如科学计算.图片处理.web应用.GUI开发等.当然也可以将自己写的模块进行打包或发布.一简单的方法是将你的类包直接copy到python的li ...

  8. ThinkPhp5学习之新手博客

    前端框架来源网络,后端框架采用 ThinkPhp 5 开发 参考资料:哔哩哔哩  ThinkPHP5.1新手博客项目实战 项目地址:https://github.com/yjy1/tp5

  9. oracle入门（7）——存储过程

    [本文介绍] 熟悉了PL/SQL语法后,实现java调用oracle存储过程才是主要目的.本文将介绍如何写存储过程,java如何调用存储过程. [存储过程介绍] 抛开专业的描述,存储过程就是在数据库里 ...

  10. SQL server T-SQL存储过程

    简介 存储过程是由一些SQL语句和控制语句组成的被封装起来的过程,它驻留在数据库中,可以被客户应用程序调用,也可以从另一个过程或触发器调用.它的参数可以被传递和返回.与应用程序中的函数过程类似,存储过 ...

相关文章