效果图：

使用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" />

 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值

方法二：使用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>

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

  1. s: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. logstash 切分tomcat日志

    以下配置是logstash切分tomcat catalina.out日志. http://grok.qiexun.net/  分割时先用这个网站测试下语句对不对,能不能按需切割日志. input { ...

  2. 百度地图点聚合MarkerClusterer性能优化

    公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...

  3. linux 之用户管理

    用户的家目录 普通用户:/home/用户名/,所有者和所属组都是此用户,权限是700 超级用户:/root/,所有者和所属组都是root用户,权限是550 用户邮箱目录 /var/spool/mail ...

  4. cmake: error: symbol(s) not found for architecture x86_64 mac os 使用boost asio

    最近在使用boost的asio库,在mac osx 上编写网络服务程序报错: :-1: error: symbol(s) not found for architecture x86_64 然后在CM ...

  5. 爬虫之Selenium 动态渲染页面爬取

    Selenim 是一个自动化测试工具,可以利用它驱动浏览器执行特定的动作,如点击.下拉等操作,同时可以获取浏览器当前呈现的页面的源代码,做到可见及可爬 1.使用流程 1)声明浏览器对象 Seleniu ...

  6. （十）操作数据库、xlrd、xlwt补充

    一.补充操作数据库: 1.建立游标时,指定返回的类型是字典 cur = coon.cursor(cursor=pymysql.cursors.DictCursor) 2.cur.fetchall()  ...

  7. Redis主从集群及哨兵模式

    本次实验环境准备用一台服务器模拟3台redis服务器,1主2从 主从集群搭建 第一步:安装Redis 安装Redis,参考前面安装Redis文章,保证单机使用没有问题. 第二步:配置服务器文件 定位到 ...

  8. 使用Chrome浏览器访问谷歌和维基百科

    安装chrome插件 谷歌访问助手即可 就这么简单

  9. npm 命令

    npm instal moduleName [-g]  :安装模块,有 -g 或 --global 是全局安装 npm install -g cnpm --registry=https://regis ...

  10. CSDN网站阅读更多：实现原理

    一 设计案例 现在很多网站都增加了阅读更多功能.以CSDN为例,分析其实现原理. 二 设计原理 1 内容区的初始高度是固定的. 2 背景渐变的操作区,遮盖在内容区上面 3 点击按钮时,解除内容区的高度 ...