js之水果选择小案例

最新推荐文章于 2023-04-26 22:36:02 发布

摇摆小仙

最新推荐文章于 2023-04-26 22:36:02 发布

阅读量1.4k

点赞数 4

分类专栏： Web - API JavaScript 文章标签： JS小案例

本文链接：https://blog.youkuaiyun.com/weixin_44827421/article/details/90301730

版权

本文介绍了一个JavaScript小案例，涉及四个功能按钮：全选、全清、左选移右、右选移左。重点讨论了在处理后两个功能时，如何避免遍历过程中因元素移动导致的遗漏问题，提出了一种优化的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例中有四个按钮,
第一个将左边的下拉框内容全部移动到右边,
第二个将右边的下拉框内容全部移动到左边,
第三个将左边选中的移动到右边
第四个将右边选中的移动到左边
在这里插入图片描述

<script>
    var left = my$('selLeft');
    var right = my$('selRight');

    // 全部移动到右边的点击事件
    my$('btn1').onclick = function () {
        // 把左边的内容加给右边
        right.innerHTML += left.innerHTML;
        // 并把左边的内容清空
        left.innerHTML = '';
    }

    // 全部移动到左边的点击事件
    my$('btn2').onclick = function () {
        // 把右边的内容加给左边
        left.innerHTML += right.innerHTML;
        // 并把右边的内容清空
        right.innerHTML = '';
    }

     // 添加到右边的点击事件
    my$('btn3').onclick = function () {
        // 遍历左边的option找到被选中的
       for (var i = 0; i < left.children.length; ) {
            left.children[i].selected ? right.appendChild(left.childre

最低0.47元/天解锁文章