案例要求：点击双击第一个下拉列表框的选项可以把对应选项移到第二个下拉列表框中，选中第一个列表框的选项（可多选）单击-->按钮可使被选中项移动到右边下拉列表框中，单击==>按钮时将左边的所有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. LADP(Lightweight Directory Access Protocol)轻量目录访问协议~小知识

    What is LDAP and how does it work(implementation)? LDAP stands for “Lightweight Directory Access Pro ...

  2. enumerate()使用

    enumerate()使用 如果对一个列表,既要遍历索引又要遍历元素时,首先可以这样写: list1 = ["这", "是", "一个", ...

  3. MySQL Execution Plan--IN查询计划(2)

    在MySQL中,IN查找经常出现性能问题,相同SQL在MySQL不同版本中表现不同. 准备测试数据: ## 创建表tb001 CREATE TABLE tb001( id INT unsigned N ...

  4. java_线程

    线程1    与线程相关的概念    线程与进程的区别    线程创建策略    线程组        线程创建策略        并发应用中一般有两种不同的线程创建策略        1直接控制线程 ...

  5. kafka-producer配置

    kafka-producer版本对比 Kafka的producer的API根据版本的不同分为kafka0.8.1.X之前的 kafka.javaapi.producer.Producer.以及之后版本 ...

  6. Fabric的@runs_once的理解

    1:runs_once的用法,一直没理解,我看网上都是说:“函数修饰符,标识的函数只会执行一次,不受多台主机影响”     实在没理解,然后看了一下官方文档,这样解释     举个例子: #!/usr ...

  7. win10 hyper-v 外网设置

    1. hyper-v管理器中添加 [虚拟交换机] 2. 为虚拟机添加网络适配器 在[虚拟交换机]中选择新创建的交换机 3.  在本本的[网络连接]中,按下 CTRL 键,然后选择[WLAN]和[vEt ...

  8. [转]golang的goroutine调度机制

    golang的goroutine调度机制 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 一直对goroutine的调度机制很好奇最近在看雨痕的golang源码分析基于go ...

  9. JAVA web端JS下载excel文件

    JSP代码如下: JSP端引入jquery.easyui.min.js库: <script type="text/javascript" src="<c:ur ...

  10. Python装饰器的调用过程

    在Python学习的过程中,装饰器是比较难理解的一个应用.本人也在学习期间也遇到很多坑,现将装饰器的基本调用过程总结一下. 首先,装饰器用到了“闭包”,而“闭包”是学习装饰器的基础,所以在讲装饰器之前 ...