使用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. jQuery实现的层级轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  3. sql server 递归汇总 按指定层级汇总

    每个地区递归层级可能不一致,数据表(table)存放最小层级地区 area --地区层级表 id name f_id leve 1 中国 0 1 2 湖北 1 2 3 武汉 2 3 ... --测试数 ...

  4. sqlserver 若字段定义的类型为datetime

    sqlserver 若字段定义的类型为datetime,插入为''(空),那么会默认值为1900-01-01 00:00:00.000 解决 插入 NULL 或者程序判断

  5. c++之——template模板函数

    为了实现与数据类型无关的编程,模板应运而生: #include<iostream> #include<string.h> using namespace std; templa ...

  6. phalcon的url大小写的问题

    一开始我以为url的大小写是不区分的,实际上调试时是可以发现获取到的url是大小写是和请求时一致, 所谓的没区分,只是服务器或者相应的代码做的处理. 在phalcon里如果路由是api/test,则会 ...

  7. pthread_self()究竟根据什么来得到线程的标识符？？？？

    #include<stdlib.h> #include<pthread.h> #include<stdio.h> #include<sched.h> # ...

  8. efm32 si446x

    Linking target: example-trickle.stk3700arm-none-eabi-gcc -Xlinker -Map=example-trickle.stk3700.map - ...

  9. C10K并发连接_转

    转载:http://blog.csdn.net/wangtaomtk/article/details/51811011 1 C10K问题 大家都知道互联网的基础就是网络通信,早期的互联网可以说是一个小 ...

  10. 应用层timer_libc_posix timer

    应用层除了通过setitimer/getitimer设置获取timer外,还可通过timer_create()等一系列函数实现应用层timer功能. 应用流程 The timers created b ...