使用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. Mock制作假数据

    name 为属性名, rule 为规则, value 为值,属性名和生成规则之间用|分隔,生成规则的格式有7种: 字符串 String, 数字 Number, 布尔型 Boolean, 对象 Obje ...

  2. document对象和属性

    文档对象:整个Html都属于document,他封装了大量的功能: docum的属性: document.title //设置文档标题等价于HTML的<title>标签 document. ...

  3. uboot的lds文件分析

    OUTPUT_FORMAT("elf32-littlearm", "elf32-littlearm", "elf32-littlearm") ...

  4. linux没有那个文件或目录

    linux脚本执行 报错 没有那个文件或目录 但是ls 看一下,明明有文件 原因: vim filename然后用命令 :set ff可看到dos或unix的字样,如果的确是dos格式的, 那么用se ...

  5. Python IDLE快捷键【转载合集】

    转载自:http://www.douban.com/note/212321426/ 编辑状态时:Ctrl + [ .Ctrl + ] 缩进代码Alt+3 Alt+4 注释.取消注释代码行Alt+5 A ...

  6. Hdu1163 Eddy's digitai Roots(九余数定理）

    题目大意: 给定一个正整数,根据一定的规则求出该数的“数根”,其规则如下: 例如给定 数字 24,将24的各个位上的数字“分离”,分别得到数字 2 和 4,而2+4=6: 因为 6 < 10,所 ...

  7. binutils工具集之---nm

    nm用于列出程序文件中的符号.建立nmtest.c文件: #include<time.h> int global1; ; static int static_global1; ; void ...

  8. sql插入数据

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. pionter指针小结

    第七章.指针和函数的关系 可以把一个指针声明成为一个指向函数的指针. intfun1(char*,int); int(*pfun1)(char*,int); pfun1=fun1; .... .... ...

  10. AM335X can驱动移植

    驱动选择 make menuconfig [*] Networking support ---> <*> CAN bus subsystem support ---> --- ...