$(function () {
            $('#toAllLeft').click(function () {
                $('#se1 option').appendTo($('#se2'));
            });

$('#toAllRight').click(function () {
                $('#se2 option').appendTo($('#se1'));
            });
            $('#toRight').click(function () {
                $('#se1 option:selected').appendTo($('#se2'));
            });
            $('#toLeft').click(function () {
                $('#se2 option:selected').appendTo($('#se1'));
            });
                });

<div style=" margin-left:400px; margin-top:10px;">
    <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1">
        <option>添加</option>
        <option>删除</option>
        <option>修改</option>
        <option>查询</option>
        <option>打印</option>
    </select>
    <div style="width: 50px; float: left; ">
        <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
        <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
        <input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />
        <input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />
    </div>
     <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">
     </select>
    </div>

[原]左右的移动&lt;&lt;&gt;&gt;&lt;&gt;jQuery的实现的更多相关文章

  1. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  2. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  3. jquery中隐藏div的几种方法

    //jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示disp ...

  4. ajax上传文件,并检查文件类型、检查文件大小

    1.使用ajaxfileupload.js的插件,但是对插件做了一处修改,才能够正常使用 修改的部分如下: uploadHttpData: function (r, type) { var data ...

  5. 移动端轮播图插件(支持Zepto和jQuery)

    一. 效果图 二. 功能介绍 1. 支持图片自动轮播和非自动轮播 2. 支持点击和滑动. 三. 简单介绍 代码都有注释,逻辑简单,不做更多赘述. 1. 在你的html中添加一行. <sectio ...

  6. 转载JQuery 获取设置值,添加元素详解

    转载原地址 http://www.cnblogs.com/0201zcr/p/4782476.html jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操 ...

  7. jQuery each的实现与call方法的详细介绍

    转载原出处: http://www.f2es.com/jquery-each-intro/ 先贴上jquery实现each功能的源代码(把常用的call部分提取出来,为了方便理解,就进行了一定的修改) ...

  8. JQ插件ajaxFileUpload、php实现图片,数据同时上传

    代码结构如下: 1.HTML代码,没必要解释了. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  9. jquery正则常用的

    jQuery.validator.addMethod("mobilePhone",function(value,element){ return this.optional(ele ...

随机推荐

  1. java读写串口

    http://blog.csdn.net/xxyy888/article/details/8946046

  2. MySQL binlog 查看信息

    1)按时间筛选 mysqlbinlog --start-datetime="2009-09-14 0:20:00" --stop-datetim="2009-09-15 ...

  3. Linux系统安装建议

    1.推荐使用CentOS-6.x 64位版本:2.分区,推荐分出/usr/local用来存放应用程序./data分区用来存放数据,具体分区建议如下:/boot 100Mswap 4096M (视内存大 ...

  4. B题 Before an Exam

    Description Tomorrow Peter has a Biology exam. He does not like this subject much, but d days ago he ...

  5. 笔记一:OOAD与UML

    一.面向对象的概念与方法 1.  面向对象 1.1. 面向对象是一种系统建模技术 1.2. 面向对象编程是按照OO的方法学来开发程序的过程 1.3. 通过分析系统内对象的交互来描述或建模一个系统 1. ...

  6. 转载-ACPI的知识

    ACPI – the Advanced Configuration & Power Interface. ACPI是OS,BIOS和硬件之间的抽象层.它允许OS和平台独立的发展,比如新的OS可 ...

  7. MyBatis 多表联合查询,字段重复的解决方法

    MyBatis 多表联合查询,两张表中字段重复时,在配置文件中,sql语句联合查询时使用字段别名,resultMap中对应的column属性使用相应的别名: <resultMap type=&q ...

  8. Openlayer 3 的画图测量面积

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

  9. CodeFroces--Good Bye 2016-A-New Year and Hurry(水题-模拟)

    A. New Year and Hurry time limit per test 1 second memory limit per test 256 megabytes input standar ...

  10. Internet History, Technology and Security (Week1)

    Week1. History: Dawn of Electronic Computing War Time Computing and Conmmunication Keywords: Electro ...