<!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. Python爬虫教程-15-读取cookie(人人网)和SSL(12306官网)

    Python爬虫教程-15-爬虫读取cookie(人人网)和SSL(12306官网) 上一篇写道关于存储cookie文件,本篇介绍怎样读取cookie文件 cookie的读取 案例v16ssl文件:h ...

  2. 安装、配置Jupyter Notebook快速入门教程

    What? Why? How? ---安装 ---启动 ---关闭 ---保存 Markdown语法 Magic关键词 转换notebook--toHTML 创建幻灯片 运行代码 What? 文字化编 ...

  3. C# FTP删除文件以及文件夹

    1.FTP文件操作类   FtpClient using System; using System.Collections.Generic; using System.Linq; using Syst ...

  4. pt-heartbeat（percona toolkit）

    pt-heartbeat是用来监控主从延迟的一款percona工具,现在我们大部分的MySQL架构还是基于主从复制,例如MHA,MMM,keepalived等解决方案.而主从环境的话,我们很关心的就是 ...

  5. ASPNET MVC Error 500.19

    今天创建了一个新的ASPNET MVC 项目部署到本地, 生成成功后在浏览器中输入URL却发现报这个错 参照下面的文章我给IIS_IUSRS和IUSR(我比较懒直接everyone)赋予虚拟目录读写权 ...

  6. Elasticsearch 架构原理

    为什么要学习架构? Elasticsearch的一些架构设计,对我们做性能调优.故障处理,具有非常重要的影响.下面将从Elasticsearch的准实时索引的实现.自动发现.rounting和repl ...

  7. ZT 俞敏洪：2014我要闭嘴 相信未来不是梦

    俞敏洪:2014我要闭嘴 相信未来不是梦 手机免费访问www.cnfol.com2013年12月11日 08:38 中国企业家网 查看评论 字体:小  中  大中金在线微博微信加关注 扫描二维码 关注 ...

  8. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  9. cv2.resize

    import cv2 img = cv2.imread('0_116_99_355_0.jpg') # 方法一: # res = cv2.resize(img,None,fx=2,fy=2,inter ...

  10. 关于PHP数组你应该知道的事情

    (1).PHP数组的遍历顺序 先举个栗子: <?php $arr['a'] = '123'; $arr['b'] = '456'; $arr['c'] = '789'; foreach($a a ...