<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div, div button {

            display: inline-block;

            float: left;

        }

        #button {

            margin: 10px 10px;

        }

    </style>

</head>

<body>

<div>

    <select name="" id="eg1" multiple>

        <option value="">nihao1</option>

        <option value="">nihao2</option>

        <option value="">nihao3</option>

        <option value="">nihao4</option>

    </select>

</div>

<div id="button">

    <button id="select_all" type="button"> ></button>

    <br>

    <button id="cancel_all" type="button"> <</button>

</div>

<div>

    <select id="eg2" multiple>

        <option value="">hah1</option>

        <option value="">hah2</option>

    </select>

</div>

<script src="jquery-3.3.1.js"></script>

<script>

    // 选中全部

    $('#select_all').click(function () {

        $('#eg2').append($('#eg1>option'));

    });

    // 取消全部

    $('#cancel_all').click(function () {

        $('#eg1').append($('#eg2>option'));

    });

    // 双击选中

    $('#eg1').on('dblclick', 'option', function () {

        $('#eg2').append($(this));

    });

    // 双击取消

    $('#eg2').on('dblclick', 'option', function () {

        $('#eg1').append($(this));

    });

</script>

</body>

</html>

jQuery动态绑定事件（左右移动）的更多相关文章

  1. jquery - 动态绑定事件

    举个例子: html页面 <div><button type="button" class="test">测试</button&g ...

  2. jquery动态绑定事件

    什么是动态绑定? 动态绑定是指动态添加的DOM节点或者html元素,他们最开始时运行的时候是不存在的.如果要给这些动态加入的节点增加事件,就必须要用jquery的on方法来绑定事件. $('.cont ...

  3. $("#XXX").click()和$("#YYY").on("click","指定的元素",function(){});的区别(jQuery动态绑定事件)

    //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label='Previous' ...

  4. Jquery中$("").事件()和$("").on("事件","指定的元素",function(){});的区别(jQuery动态绑定事件)

    这个是在学习时不懂的问题,记录下来方便查看 转至https://www.cnblogs.com/mr-wuxiansheng/p/7136864.html //绑定 下一页 的点击事件 $(" ...

  5. jquery json遍历和动态绑定事件

    <div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text- ...

  6. jQuery的动态绑定事件的应用

    注意:bind()的事件绑定是只对当前页面选中的元素有效.如果你想对动态创建的元素bind()事件,是没有办法达到效果的 <script src="jquery-1.11.2.min. ...

  7. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  8. jquery 动态绑定bind()及模拟鼠标点击A链接

    近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...

  9. jQuery的事件绑定与触发 - 学习笔记

    jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...

随机推荐

  1. ArcGIS 编程中对接口的理解

    学习AO,最重要的是理解“接口”这个概念.接口是什么?有什么具体作用?在多种计算机高级语言中,都可以看到“接口”这个术语,但基本上每一本书对“为什么使用接口”等重要文都都“语焉不详”,使得初学者往往不 ...

  2. sqlserver查询当月数据

    SELECT * FROM table WHERE datediff(month,LoginTime,getdate())=0 ORDER BY LoginTime SELECT * FROM tab ...

  3. Retrofit实现图文上传至服务器

    Retrofit实现图文上传至服务器 前言:现在大多数的项目中都涉及图片+文字上传了,下面请详见实现原理: 开发环境:AndroidStudio 1.引入依赖: compile 'com.square ...

  4. Python学习系列-----第二章 操作符与表达式

    2.1 数学运算和赋值的简便方法 例如: 2.2 优先级 在python中运算符有优先级之分,高优先级的运算符先执行,低优先级的运算符后执行.下面是运算符优先级:(同一行的运算符具有相同的优先级) 2 ...

  5. 《effective c++》读书笔记（上）

    最近在读<Effective C++>,确实是经典之作,但是有的条款也需要一些细节补充,所以都列在这篇文章里,希望能不断更新,个人阅读的是第三版,不包括C++ 11的内容. 条款1:视C+ ...

  6. redis 存取问题

    今天在写短信接口时候,要把验证码存到缓存里面.因为之前别人已经写的有案例,按照之前写的,获取 值.存到数据库,存到redis. 因为有过期时间,需要传过期时间.但是怎么都是不出来... 源码: @Ov ...

  7. Oracle从入门到精通 限定查询和排序查询的问题

    视频课程:李兴华 Oracle从入门到精通视频课程 学习者:阳光罗诺 视频来源:51CTO学院 知识点 SQL语句的执行顺序 限定符号的使用.   具体内容: 如果想要对所选择的数据进行控制,就可以使 ...

  8. linux防火墙放行了端口，但是仍然访问不到

    我们的防火墙默认规则如下: 如果防火墙放行了端口,但是仍然访问不到的话,可能是因为添加规则的时候,用的是iptables -A 选项,这样,增加的规则会排列在 第6条 规则后面,虽然service i ...

  9. CVE-2015-1642 POC

    月初,玄武实验室的“每日安全动态”推送了一篇office UAF漏洞利用的文章,之前对office上UAF漏洞利用占位问题有些疑问,刚好就借助这篇文章重现了一下.其中堆喷射部分不是特别稳定,漏洞成因和 ...

  10. 设计模式：状态（State）模式

    设计模式:状态(State)模式 一.前言     状态模式在某些场合中使用是非常方便的,什么叫做状态,如果大家学过<编译原理>就会明白DFA M和NFA M,在确定有限状态机和非确定有限 ...