使用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. Kibana查询说明

    elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 Kibana接口概述 Kibana接口分为四个主要部分: 发现 可视化 仪表板 设置 我们将按照列出的顺序浏览每个部分的 ...

  2. 我对C++的一些疑问

    我对C++的一些疑问,最近使用C++,总感觉有些东西自己没有抓住,也可能是自己基础学的不是很扎实,所以对一些基本的东西理解不够透彻导致的.因为自己在学校也学过C#和java,C#它是一个完全的面向对象 ...

  3. 一些有用的Sql语句

    1.插入数据后,返回插入的Id ')

  4. 拦截iOS系统导航栏返回按钮事件－三种方法

    方法一:在dealloc里面书写监听事件,因为只有pop才会调用dealloc,push不会掉用 - (void)dealloc {YLLog(@"123"); } 方法二:在- ...

  5. ASP.new GridView获取隐藏列值的几种方法

    解决方法: 原文来自:http://www.tzwhx.com/NewShow/newBodyShow/控件_32933.html 作者:lerit  1.隐藏列前获取数据 看这样一个例子(以下均以此 ...

  6. 【C#】获取机器码MachineCode

    需求:机器码可以用于校验用户是否用的同一台电脑登录,比如在别的机器上登录时做强制下线(踢人下线).通常在用户注册时,计算一次用户的机器码跟随注册信息一起发送给服务器. 机器码的作用看百度百科: 定义规 ...

  7. 集群同步hive的脚本

    程序员就是把一切手工做的事情变成让计算机来做,从而可以让自己偷偷懒. 以下就是个非常low的hive文件夹同步程序,至于节点超过100个或者1000个的,可以加个循环了. #!/bin/sh #=== ...

  8. CentOS下安装Gitlab

    环境 Requirements 软件 版本 CentOS 6.6 Python 2.6 Ruby 2.1.5 Git 1.7.10+ Redis 2.0+ MySQL   GitLab 7-8-sta ...

  9. iOS边练边学--(Quartz2D)图片裁剪，带圆环的裁剪

    一.图片裁剪,示意图 二.带圆环的图片裁剪示意图

  10. rails rake和示例

    一篇看到的讲解得不错的文章 http://blog.csdn.net/clskkk2222/article/details/6735365 这里还有一些例子: Rake Documentation R ...