• jQuery和DOM对比 左右移动选项案例

    目录

    左右移动选项案例

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右移动选项案例title>
    <script src="../jquery.js">script>
    <style>
        select,div{
            float: left;
            margin-top: 100px;
            margin-left:100px ;
        }
    style>
head>
<body>

<select id="first" size="5" multiple>
    <option>Argentinaoption>
    <option>Braziloption>
    <option>Canadaoption>
    <option>Chileoption>
    <option>Chinaoption>
    <option>Cubaoption>
    <option>Denmarkoption>
    <option>Egyptoption>
    <option>Franceoption>
    <option>Greeceoption>
    <option>Spainoption>
    select>
    <div>
        <button id="add">>button>
        <button id="add_all">>>button>
        <button id="remove"><button>
        <button id="remove_all"><<button>
    div>
<select id="second" size="5" multiple>select>
<script>
    //DOM操作
    // var add =document.getElementById('add')
    // add.addEventListener('click',function(){
    //     //获取左边被选中的选项，移动到右边
    //     var first=document.getElementById('first');
    //     var opts=first.getElementsByTagName('option');
    //     for(var i=0;i
    //         var opt=opts[i];
    //         if (opt.selected){
    //             var second=document.getElementById(('second'));
    //             second.appendChild(opt);
    //             i--;
    //         }
    //     }
    // });
    //jQuery操作
    $('#add').click(function(){
        $('#first>option:selected').appendTo($('#second'));
    });
    $('#add_all').click(function(){
        $('#first>option').appendTo($('#second'));
    });
    $('#remove').click(function(){
        $('#second>option:selected').appendTo($('#first'));
    });
    $('#remove_all').click(function(){
        $('#second>option').appendTo($('#first'));
    });
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    动态Noedlist集合在应用中的问题

    问题： 每次移动option之后 为移动的option都会被补上去，所以在循环中 如果选中全部option则将只有六次循环且不是连续的六个
    第一个option被移动，剩下集合中的第二个option元素被移动
    解决办法：
    在for循环中加入语句i–
    使i每次都是从0开始
    第二种解决方法：
    倒序来排列

    var add =document.getElementById('add')
    add.addEventListener('click',function(){
        //获取左边被选中的选项，移动到右边
        var first=document.getElementById('first');
        var opts=first.getElementsByTagName('option');
        for(var i=opts.length-1;i>=0;i--){
            var opt=opts[i];
            if (opt.selected){
                var second=document.getElementById(('second'));
                second.appendChild(opt);
            }
        }
    });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    今日金句

    记住，风筝逆风而飞。

  • 相关阅读:
    基于springboot的ShardingSphere5.2.1的分库分表的解决方案之分库分表解决方案(二)
    DHCP和PPPoE协议以及抓包分析
    一键安装上新版本的QQ
    centos7安装git客户端
    邮件标题是邮件营销的第一生产力
    [buuctf][ACTF新生赛2020]usualCrypt
    数智亚运刷屏，优化赛事管理的神器我们也有！
    【万字长文】前端性能优化实践 | 京东云技术团队
    arthas进阶版排查问题之idea插件工具操作
    JAVA 歌词解析 采用 TreeMap处理
  • 原文地址：https://blog.csdn.net/weixin_50001396/article/details/126940385