使用jquery做一个多选列表左右互换的功能，代码如下

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

</head>

<body>

    <div>

        <div>

            <div style="display:inline-block;">

                <div>1组用户</div>

                <select name="" multiple="multiple" style="height:200px;" id="left_select">

                    <option value="101">用户101</option>

                    <option value="102">用户102</option>

                    <option value="103">用户103</option>

                    <option value="104">用户104</option>

                    <option value="105">用户105</option>

                    <option value="106">用户106</option>

                    <option value="107">用户107</option>

                </select>

            </div>

            <div style="display:inline-block;height: 200px;vertical-align: middle;">

                <button type="button" id="left_btn">>></button>

                <button type="button" id="right_btn"><<</button>

            </div>

            <div style="display:inline-block;">

                <div>2组用户</div>

                <select name="" multiple="multiple" style="height:200px;" id="right_select">

                    <option value="201">用户201</option>

                    <option value="202">用户202</option>

                    <option value="203">用户203</option>

                    <option value="204">用户204</option>

                    <option value="205">用户205</option>

                    <option value="206">用户206</option>

                    <option value="207">用户207</option>

                </select>

            </div>

            <div></div>

        </div>

    </div>

    <script type="text/javascript">

        $(function(){

            //页面加载完毕后开始执行的事件

            //点击左边select 去右边

            $("#left_btn").click(function(){

                $("#left_select option:selected").each(function(){

                    $("#right_select").append($(this).prop("outerHTML"));

                    $(this).remove();

                });

            });

            //点击右边select 去左边

            $("#right_btn").click(function(){

                $("#right_select option:selected").each(function(){

                    $("#left_select").append($(this).prop("outerHTML"));

                    $(this).remove();

                });

            });

        });

    </script>

</body>

</html>

效果如图：

jquery书写左右两个多选下拉列表交换移除功能的更多相关文章

  1. 一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect

    在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起 ...

  2. Flex4 双选下拉列表的实现（源代码）

    本文属原创文章,如需转载,请注明出处,谢谢 企业应用中少不了双选下拉列表控件,但几乎都没有独立的控件,Flex在这上面得天独厚,ArrayCollection的过滤功能使得我们只需要一个数据源就可以将 ...

  3. jquery插件的两种形式

    这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...

  4. jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...

  5. jquery选择器中两个class是什么意思？

    jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...

  6. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  8. jQuery插件开发的两种方法及$.fn.extend的详解(转)

    jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下   jQuery插件开发分为两种: 1 类级别 类级别你可以 ...

  9. JQuery 提供了两种方式来阻止事件冒泡。

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

随机推荐

  1. Angularjs 源码

    /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org function t ...

  2. ADO.NET 连接方式进行数据库访问

    转自:http://www.cnblogs.com/oneword/archive/2010/09/10/1823414.html 连接到数据源 连接到数据源需要使用两步: 1.创建连接字符串 2.使 ...

  3. Java日志 (zhuan)

    http://www.cnblogs.com/bird-li/p/4696662.html ************************************************* 日志对于 ...

  4. 【java web】Caused by: java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory

    javaweb报错如下:22:49:22.155 [http-nio-8081-exec-9] ERROR org.apache.struts2.dispatcher.DefaultDispatche ...

  5. c语言实现类似重载的功能

    今天man了一下open,发现open函数的原型居然看着是重载,C语言不是不支持重载么,经过一番搜寻之后,总结如下: 可变长参数函数 C语言是不支持函数重载机制的,但是支持变长参数函数,当然C++也是 ...

  6. c++多继承浅析

            图一                                                                                       图二 ...

  7. C#类的修饰符

    ## C#类的修饰符------------------------- public 任何地方可以调用- internal 同一应用程序集内使用- partial 部分类,一个类分成几部分写在不同文件 ...

  8. Linux mdev 热拔插配置

    在嵌入式领域使用比较多的是用 mdev 进行热插拔的操作. 文件系统进行配置 # 首先对 /etc/fstab 进行配置 # <file system> <mount pt> ...

  9. spring4.1.6配置quartz2.2.1（maven） <转>

    Spring3.0不支持Quartz2.0,因为org.quartz.CronTrigger在2.0从class变成了一个interface造成IncompatibleClassChangeError ...

  10. javascript那些不应该忽视的细节

    1.null与Object.prototype使用typeof操作符结果都是object,但他们都不是Object的实例. typeof null // object null instanceof ...