<!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. css层叠性和继承性

    1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...

  2. QT 定时执行某个函数，隐藏某个控件

    QTimer::singleShot(3000, this, SLOT(slotHideFinishedLabel())); // 这里是一个3秒定时器, 且只执行一次. #include " ...

  3. 利用canvas进行一个饼形图的绘制

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

  4. php遍历数组赋值

    <?php $arr=array( array("num"=>100,"name"=>"Liuxy","scor ...

  5. Java任务调度框架Quartz入门

    Quartz[kwɔːts]:石英,其框架和名字一样简单朴素又不失魅力,在Java程序界,Quartz大名鼎鼎,很多Java应用几乎都集成或构建了一个定时任务调度系统,Quartz是一个定时任务调度框 ...

  6. Elasticsearch学习总结--原理篇

    一.概念 1.1 官方文档 以下总结自ElasticSearch的官方文档以及自己的一些实践,有兴趣的可以直接阅读官方文档: https://www.elastic.co/guide/en/elast ...

  7. Python中GBK, UTF-8和Unicode的编码问题

    编码问题,一直是使用python2时的一块心病.几乎所有的控制台输入输出.IO操作和HTTP操作都会涉及如下的编码问题: UnicodeDecodeError:‘ascii’codec can’t d ...

  8. js漂浮广告实现代码（合集经典）

    <html> <head> <title>漂浮广告</title> <body> <div id="codefans_net ...

  9. java之Pattern.compile相关正则表达式

    java之Pattern.compile相关正则表达式 1.验证邮箱地址是否正确:String check = "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([ ...

  10. OC基础数据类型-NSArray

    1.数组的初始化 NSArray *array = [[NSArray alloc] initWithObjects:@"One", @"Two", @&quo ...