select下拉框左右变换

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

效果图：

select下拉框左右变换select下拉框左右变换

使用jQuery插件---multiselect2side做法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />

select下拉框左右变换
 2 <script type="text/javascript" src="/Public/Js/jquery-1.6.4.min.js"></script>

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

 4 <script type="text/javascript">

 5         $().ready(function() {

 6             $('#searchable').multiselect2side({

 7                 search: "待选区　　搜索：" ,

 8                 selectedPosition: 'right',

 9                 moveOptions: false,

10                 labelsx: '待选区',

11                 labeldx: '已选区'

12             });

13

14         });

15 </script>

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

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

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

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

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

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

22          </volist>

23     <else />

24         未找到用户

25     </if>

26 </select>
</form>

页面获取值使用  $ser=$_POST['searchable']; 获取的是数组类型option的value值
select下拉框左右变换

方法二：使用jquery实现

select下拉框左右变换
<!--方法二，使用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>

select下拉框左右变换的更多相关文章

  1. s&colon;select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  2. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  3. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

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

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

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

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

  6. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  7. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  8. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  9. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

随机推荐

  1. 【转载】Shell判断字符串包含关系的几种方法

    http://www.cnblogs.com/ginsonwang/p/5525340.html 下面是直接copy的内容: (本来是不打算copy的,但是每次用到或看的时候都要跳转,感觉挺麻烦的.就 ...

  2. JQuery 筛选器

    1.选择对象1).基本·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.cl ...

  3. 网络协议 17 - HTTPDNS：私人定制的 DNS 服务

    [前五篇]系列文章传送门: 网络协议 12 - HTTP 协议:常用而不简单 网络协议 13 - HTTPS 协议:加密路上无尽头 网络协议 14 - 流媒体协议:要说爱你不容易 网络协议 15 - ...

  4. thinkphp提示不支持mysqli或者mysql

    确认php是否安装了php-mysql组件,nginx或apache的php服务进程

  5. 第十一章 IO流

    11.IO流 11.1 java.io.File类的使用 1课时 11.2 IO原理及流的分类 1课时 11.3 节点流(或文件流) 1课时 11.4 缓冲流 1课时 11.5 转换流 1课时 11. ...

  6. Windows Server 2008配置Network Load Balancing（服务群集）

          最近配置SharePoint 2013 WFE 时,客户提到要让多台WFE能load balance,于是研究了下Network Load Balancing.       当把一台服务器 ...

  7. CSS 基础 例子 Image 高度设置

    body高度100%,三个image高度分别为auto,50%,60%,imge高度为当时body高度的百分比,auto时为原始高度 html代码如下: <!DOCTYPE html> & ...

  8. Windows下fabric sdk连接Linux上fabric网络的调试过程

    上个月刚入职一家公司从事区块链研发工作,选型采用Hyperledger Fabric作为开发平台.团队的小组成员全部采用的是在VirtualBox上面安装桌面版的Ubuntu 16.04虚拟机,开发工 ...

  9. 1092&period; To Buy or Not to Buy &lpar;20&rpar;-map

    给出两个字符串,判断第二个字符串中的字符是否都出现在第一个中. 是,则输出Yes,以及多余的字符的个数. 否,则输出No,以及缺失的个数. #include <iostream> #inc ...

  10. 1044 Shopping in Mars （25 分）

    1044 Shopping in Mars (25 分) Shopping in Mars is quite a different experience. The Mars people pay b ...

相关文章