案例要求：点击双击第一个下拉列表框的选项可以把对应选项移到第二个下拉列表框中，选中第一个列表框的选项（可多选）单击-->按钮可使被选中项移动到右边下拉列表框中，单击==>按钮时将左边的所有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. SSH设置秘钥登录

    设置 SSH 通过密钥登录 我们一般使用 PuTTY 等 SSH 客户端来远程管理 Linux 服务器.但是,一般的密码方式登录,容易有密码被暴力破解的问题.所以,一般我们会将 SSH 的端口设置为默 ...

  2. alpha冲刺（1/10）

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 安排任务 博客撰写 构建之法的阅读 问题困扰: Java的学习感觉无从下手,学基础语法好 ...

  3. day06python 哈希 字典集合嵌套

    1.hash算法 hash算法 :内存中将值进行hash算法得到一个数值存储在内存中,查找也会按照算法进行查找,使用hash算法 执行效率高相对于list的索引查找 (字典,集合):使用的是hash查 ...

  4. Arch Linux 的休眠设置

    https://wiki.archlinux.org/index.php/Power_management/Suspend_and_hibernate_(简体中文)https://wiki.archl ...

  5. [ACM International Collegiate Programming Contest, Amman Collegiate Programming Contest (2018)]

    https://codeforces.com/gym/101810 A. Careful Thief time limit per test 2.5 s memory limit per test 2 ...

  6. Django项目在linux系统中虚拟环境部署

    1.在linux系统下,安装virtualenv 命令:pip install virtualenv 2.项目部署前的准备 1. Django web project deployment 1.1.  ...

  7. hadoop完全分步式搭建

    实验环境介绍 4台机器,规划如下: 计算机名 IP地址 角色 master 192.168.138.200 NameNode,SecondaryNameNode,ResourceManager sla ...

  8. JS 60秒后重发送验证码

    //settime($("#getPhoneCode"),60); function settime($obj, time) { if (time == 0) { $obj.att ...

  9. Numpy、SciPy、MatPlotLib在Python2.7.9下的安装与配置

    前言: Python安装完Numpy,SciPy和MatplotLib后,可以成为非常犀利的科研利器.网上关于这三个库的安装都写得非常不错,但是大部分人遇到的问题并不是如何安装,而是安装好后因为配置不 ...

  10. Excel技巧--按内容分列与合并

    上表的A列,如果想要按横线分隔开多列,复制粘贴很麻烦,可以使用“数据”-->“分列”来分隔开: 1.选择A列,在A列后预先插入三列空列.点击“数据”—>“分列”,对话框选择按“分隔符号”分 ...