<!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. Linux Firefox Adobe Flash Player 安装和更新

    1.下载 Firefox Adobe Flash Player 使用Linux上的火狐浏览器访问如下的下载网址: https://get.adobe.com/flashplayer/ 选择下载 &qu ...

  2. Linux 内核超时导致虚拟机无法正常启动

    问题描述 当 Linux 虚拟机启动时,通过串口输出或者启动日志, 观察到超时的报错.导致虚拟机无法正常启动和连接. 问题分析 常见的超时报错范例如下: 复制 INFO: task swapper:1 ...

  3. SQL点点滴滴_查询类型和索引-转载

    当您考虑是否要对列创建索引时, 请估计在查询中使用列的方式, 下表介绍了索引对其有用的查询类型. 表中的示例基于 AdventureWorks2008R2 示例数据库, 在 SQL Server Ma ...

  4. input输入框数字验证

    正则限制input只能输入大于零的数字:onkeyup="this.value=this.value.replace(/\D|^0/g,'')" onafterpaste=&quo ...

  5. 爬虫入门之Scrapy框架实战(新浪百科豆瓣)(十二)

    一 新浪新闻爬取 1 爬取新浪新闻(全站爬取) 项目搭建与开启 scrapy startproject sina cd sina scrapy genspider mysina http://roll ...

  6. M-AddTwoNumbers-未完成

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  7. nginx的开机自启、server命令启动、nginx.conf配置

    1.将Nginx设置为开机自动启动 a.当上面6步完成之后,说明安装已经完全成功了,但是每次开机我们面临的一个问题,就是每次都要执行命令(1: cd /usr/local/nginx/sbin/   ...

  8. 【系统】在windows中追加/删除虚拟打印机

    由于项目需要在windwos系统中添加多台虚拟打印机(能够正常打印出纸),查找了一下系统函数. 使用 rundll32 printui.dll,PrintUIEntry,在CMD中运行,在弹出框中得到 ...

  9. vagrant 安装虚拟机

    目录 搭建属于你的环境 安装virtualbox 安装 vagrant vagrant 添加系统镜像box 新建虚拟机 相关配置 ==遇到问题== [TOC] 搭建属于你的环境 安装环境有时也是头疼的 ...

  10. Java内存使用情况查看工具

    Java通过jvm自己管理内存,同时Java提供了一些命令行工具,用于查看内存使用情况.这里主要介绍一下jstat.jmap命令以及相关工具. 一.jstat查看 gc实时执行情况 jstat命令命令 ...