使用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. GPIO实验(一)

    目标:点亮LED1.看原理图,找到对应的引脚和寄存器2.a.配置寄存器为输入/出引脚    GPFCON[9:8]=0b01  b.设置输出高/低电平    GPDAT[4]=0b0 1.预处理2.编 ...

  2. Python实现二叉树及其4种遍历

    Python & BinaryTree 1. BinaryTree (二叉树) 二叉树是有限个元素的集合,该集合或者为空.或者有一个称为根节点(root)的元素及两个互不相交的.分别被称为左子 ...

  3. 使用conda 对gcc进行升级 （sonicparanoid）

    由于要是用python 3.6版本的一个包sonicparanoid,但是系统的gcc比较老,所以先用conda创建python环境,在该环境下尽心gcc的安装和升级 conda create --n ...

  4. sqlserver 的一些好用的插件

    sqlserver 的一些好用的插件 1.http://www.red-gate.com/products/

  5. 公用的web服务

    1.http://www.webxml.com.cn/zh_cn/index.aspx 1.1.www.webxml.com.cn/WebServices/WeatherWebService.asmx ...

  6. 非分离线程未使用join函数例子：

    //非分离线程未使用join函数例子: #include<stdlib.h> #include<pthread.h> #include<stdio.h> #incl ...

  7. ubuntu 命令 dpkg -l

    dpkg -l 每条记录对应一个软件包,每条记录的第一, 二, 三个字符是软件包的状态标识, 后边依此是软件包名称,版本号, 和简单描述. 关于每个状态,可以参考 man dpkg-query 关于每 ...

  8. C语言 常用的宏定义

    __FILE__ :宏在预编译时会替换成当前的源文件名 __LINE__:宏在预编译时会替换成当前的行号 __FUNCTION__:宏在预编译时会替换成当前的函数名称 //宏__VA_ARGS__的用 ...

  9. zebra/quagga线程分析

    /* 线程按照不同的功能进行分类.有6条双链,分别表示不同类型的线程.将要运行的时候, * 就从不同的链表中取出,添加到ready链表中,运行完成之后,将线程结构体清空放到 * unuse链表中.一般 ...

  10. ubuntu配置apache和cgi

    ubuntu配置apache和cgi . 更新源并进行安装,否则后面的下载可能会不成功. sudo apt-get update sudo apt-get upgrade . 安装apache2服务 ...