案例要求：点击双击第一个下拉列表框的选项可以把对应选项移到第二个下拉列表框中，选中第一个列表框的选项（可多选）单击-->按钮可使被选中项移动到右边下拉列表框中，单击==>按钮时将左边的所有option选项移到右边，反过来亦是如此。

效果图：

注意点：这里只能使用内部插入，而不能使用外部插入，否则会使得option选项跑到下拉列表框的外面去

存在问题：若是有一个下拉列表框没有选项，则会存在对不齐的现象，求大神看到了告知解决办法

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>JQUERY</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: lightgrey;
            border: 1px black solid;
            margin: 10px;
            float: left;
            text-align: center;//设置div面板内容居中显示，能够达到按钮都居中显示的效果
        }
        #first{
            width: 50px;
            background: greenyellow;
            border: 1px black solid;
            margin: 10px;
            float: left;
        }
        #second{
            width: 50px;
            background: greenyellow;
            border: 1px black solid;
            margin: 10px;
            float: right;
        }
        button{
            text-align: center;

        }
    </style>
</head>

<body>
    <div>
        <select id="first" size="10" multiple="true">
            <option>北京</option>
            <option>天津</option>
            <option>上海</option>
            <option>广州</option>
            <option>广东</option>
            <option>南京</option>
            <option>武汉</option>
            <option>成都</option>
            <option>湖北</option>
            <option>恩施</option>
        </select>

        <select id="second" size="10" multiple="true">
        </select>
        <br/>
        <button id="rightOne" value="-->">--></button><br/><br/>
        <button id="rightAll" value="==>">==></button><br/><br/>
        <button id="leftOne" value="<--"><--</button><br/><br/>
        <button id="leftAll" value="<=="><==</button>
    </div>
</body>
</html>
<script type="text/javascript">
    $("#rightOne").click(function(){
        $("#first>option:selected").appendTo($("#second"));
    });
    $("#rightAll").click(function(){
        $("#first>option").appendTo($("#second"));
    });
    $("#leftOne").click(function(){
        $("#second>option:selected").appendTo($("#first"));
    });
    $("#leftAll").click(function(){
        $("#second>option").appendTo($("#first"));
    });
    $("#first").dblclick(function(){
        $("#first>option:selected").appendTo($("#second"));
    });
    $("#second").dblclick(function(){
        $("#second>option:selected").appendTo($("#first"));
    });
</script>

jQuery的appendTo案例的更多相关文章

  1. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  2. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  3. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  4. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  5. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  6. JQuery 事件及案例

    JQuery事件与JavaScript事件相似,只是把其中的on去掉 1.click,dblclick事件 案例1:点击缩略图换背景 <html xmlns="http://www.w ...

  7. jquery利用appendTo动态创建元素

    动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...

  8. Jquery函数大全 - 案例说明

    function(){$(this).addClass(”out”);}); toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二 ...

  9. jquery城市选择案例

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. N!分解质因子p的个数_快速求组合数C(n,m)

    int f(int n,int p) { ) ; return f(n/p,p) + n/p; } https://www.xuebuyuan.com/2867209.html 求组合数C(n,m)( ...

  2. Windows安装Anaconda出现failed to create menus

    当出现上述问题时,有以下的解决办法: (1)默认安装,即一直next: (2)安装路径里不要包含英文以外的语言,即安装路径全部用英文命名: (3)先不要安装python,或者将安装的python配置好 ...

  3. 开源中国/码云 README.md上传图片的爬坑记录

    整理代码,将电脑中长期没有用过的代码放到码云上托管,给项目录制gif动画,在写项目README.md时使用,结果在上传图片时一直出问题,现记录下最后解决方法: 1. 最初直接将录制好的图片放入到img ...

  4. Self-Introduce

    My name is Leo.I like listening music, especially English song.What's more, I enjoy playing games, l ...

  5. centos安装redis步骤

    1.官网或wget下载redis-4.0.9.tar.gz: cd /home/tar wget http://download.redis.io/releases/redis-4.0.9.tar.g ...

  6. sails.js mvc framework learning

    目的:加快开发速度,总结使用方法: menu list: custom controller custom 模块使用 custom model custom middleware custom ser ...

  7. /etc/hosts和/etc/hostname区别

    /etc/hosts主要是ip和域名的对应 /etc/hostname主要是本地主机域名(本地主机名修改过后需要重启服务器才能生效) 如果我想在另一台linux主机里面使用域名访问上面这台主机A,只需 ...

  8. 域名到站点的负载均衡技术一览（主要是探讨一台Nginx抵御大并发的解决方案）（转）https://www.cnblogs.com/EasonJim/p/7823410.html

    一.问题域 Nginx.LVS.Keepalived.F5.DNS轮询,往往讨论的是接入层的这样几个问题: 1)可用性:任何一台机器挂了,服务受不受影响 2)扩展性:能否通过增加机器,扩充系统的性能 ...

  9. new 对象时的暗执行顺序

    为什么称为暗执行顺序,因为当我们在new 对象时,其不是简简单单的new一个完事,它要首先检查父类的,静态的,非静态的等代码,就好像我们结婚生孩子一样,要先到祖宗那里,公安局那里,左邻右舍那里,告诉他 ...

  10. centos7-网络连接

    Centos系统在安装完毕后,默认联网状态为no,需要手动开启联网状态. 编辑网卡文件 vim /etc/sysconfig/network-scripts/ifcfg-eno16777736 修改O ...