案例要求：点击双击第一个下拉列表框的选项可以把对应选项移到第二个下拉列表框中，选中第一个列表框的选项（可多选）单击-->按钮可使被选中项移动到右边下拉列表框中，单击==>按钮时将左边的所有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. 学c++需要先学c语言吗？

    看你的需求,如果是底层开发,就必须学习C语言.如果只是应用开发,可以直接从C++开始学习.实际上这两个语言是平等的,只是在语法上C++尽量与C兼容,但仍然有很多不同的地方. 1) C++不是C的超集. ...

  2. 【EMV L2】SDA静态数据认证处理流程

    [静态数据认证] 静态数据认证处理过程中,卡片没有执行任何处理,终端执行的处理流程:1.认证中心公钥的获取终端使用卡片上的认证中心公钥索引(PKI)[TAG:8F,Certification Auth ...

  3. 复习-java-001

    一.基本数据类型: byte.boolean.char.string.int.short.long.float.double 二.java三大特性: 1.封装 封装是实现面向对象程序设计的第一步,封装 ...

  4. Selenium 基础知识

    被测产品是B/S 结构,那么推荐selenium selenium 并不是单纯的一个工具,他是一组工具的集合 1. selenium IDE 是嵌入到Firefox浏览器中的一个插件,实现简单的浏览器 ...

  5. php 图片缩放然后合成并保存

    /** * 功能说明 * 将files/model_24/images/下的所有图片文件进行等比例缩放 到$image40w 尺寸 然后放到files/model_24/model.png图片的指定位 ...

  6. Java分布式锁

    分布式锁简述 在单机时代,虽然不存在分布式锁,但也会面临资源互斥的情况,只不过在单机的情况下,如果有多个线程要同时访问某个共享资源的时候,我们可以采用线程间加锁的机制,即当某个线程获取到这个资源后,就 ...

  7. IIS发布错误及解决

    HTTP 错误 403.14 - Forbidden  解决办法: 打开iis管理器,找到对应网站,并找到目录浏览,双击打开. 点击启用即可. HTTP 错误 500.19 - Internal Se ...

  8. java实现导入excel功能

    实现功能: 1.Excel模板下载 2.导入excel 一.jsp效果和代码 <form id="uploadForm" target="frameFile&quo ...

  9. 网络之 Iptables总结

    查询iptables -L 默认 filter表iptables -L -t filteriptables -L -t natiptables -L -t mangle Filter表service ...

  10. sql server 2016 附加 其它目录的数据库

    如果数据库不在默认目录,那么需要将 mdf所在目录或者 mdf文件 添加 用户 [NT SERVICE\MSSQLSERVER]的创建权限,否则会提示没有权限, 具体详见: https://docs. ...