jq实现左右选项移动功能（穿梭框）

最新推荐文章于 2023-07-15 11:23:04 发布

weixin_45070265

最新推荐文章于 2023-07-15 11:23:04 发布

阅读量2.3k

点赞数 2

分类专栏： javascript 文章标签： javascript jquery html5 css html

本文链接：https://blog.csdn.net/weixin_45070265/article/details/107825089

版权

javascript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

布局效果图

在这里插入图片描述

功能描述

1.点击——>按钮可以将左边选中的选项移动到右边
2.点击<——按钮可以将右边选中的选项移动到左边
3.点击===>按钮可以将左边的全部移动到右边
4.点击===>按钮可以将右边的全部移动到左边
5.双击选项可以将该选项移动到对面
6.点击‘上’按钮可以将左边和右边选中的选项向上移动
7.点击‘下’按钮可以将左边和右边选中的选项向下移动

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #left,
        #right {
            width: 150px;
            height: 300px;
            text-align: center;
            position: absolute;
            top: 100px;
        }

        #left {
            left: 200px;
        }

        #right {
            left: 400px;
        }

        #btn {
            position: absolute;
            top: 50px;
            left: 245px
        }
        .up{
            position: relative;
            left: -150px;
            top: 100px;
        }
        .down{
            position: relative;
            left: -184px;
            top: 130px;
        }
    </style>
</head>
<body>
    <div id="btn">
        <button>——></button>
        <button>===></button>
        &emsp;&emsp;&emsp;
        <button> <—— </button>
        <button> <=== </button>
        <button class="up"> 上</button>
        <button class="down"> 下</button>
    </div>
    <select id="left" multiple>
        <option>追风筝的人</option>
        <option>生活的哲学</option>
        <option>思辨与立场</option>
        <option>恰如其分的自尊</option>
        <option>墨菲定律</option>
        <option>定投十年财务自由</option>
        <option>人间有味是清欢</option>
        <option>活着</option>
        <option>偷影子的人</option>
        <option>月亮与六便士</option>
        <option>平凡的世界</option>
    </select>
    <select id="right" multiple></select>

    <!-- 引入jquery文件 -->
    <script src="../lib/jquery.min.js"></script>
    <script>
        // 为第一个按钮——>添加点击事件
        $('#btn>button:eq(0)').click(function () {
            // 将左边选中的选项移动到右边,并且清除选中样式
            $('#left>option:selected').remove().appendTo('#right').prop('selected', false)
        })
        // 为第二个按钮===>添加点击事件
        $('#btn>button:eq(1)').click(function () {
            // 将左边全部选项移动到右边,并且清除选中样式
            $('#left>option').remove().appendTo('#right').prop('selected', false)
        })
        // 为第三个按钮<——添加点击事件
        $('#btn>button:eq(2)').click(function () {
            // 将右边边选中的选项移动到左边,并且清除选中样式
            $('#right>option:selected').remove().appendTo('#left').prop('selected', false)
        })
        // 为第四个按钮<===添加点击事件
        $('#btn>button:eq(3)').click(function () {
            // 将右边全部选项移动到左边,并且清除选中样式
            $('#right>option').remove().appendTo('#left').prop('selected', false)
        })
        // 双击选项,将改选项移动到对面。（注意：这里需要使用事件委派方式注册事件）
        $('select').on('dblclick','option',function(){
            // 获取当前选项对面的下拉框
            let $select = $(this).closest('select').siblings('select')
            // 将当前双击的选项移动到对面的下拉框中
            $(this).remove().appendTo($select).prop('selected', false)
        })
        // 向上移动
        $('.up').click(function () {
            /* 找到选中的option对应的父亲select,因为可能两边都同时有选中,
            所以遍历select,并分别找到他们下面选中的option,
            将选中的option移动到选中的option中的第一个的前面 */
            $('option:selected').closest('select').each(function(index,dom){
                $(this).find('option:selected').insertBefore($(this).find('option:selected:eq(0)').prev())
            })
        })
        // 向下移动
        $('.down').click(function () {
            /* 
            与上同理
             */
            $('option:selected').closest('select').each(function(index,dom){
                // 找到选中的option中的最后一个的索引值
                let lastIndex = $(this).find('option:selected').length-1
                $(this).find('option:selected').insertAfter($(this).find(`option:selected:eq(${lastIndex})`).next())
            })
        })
    </script>
</body>

</html>

注意点

1.选项移动在对方之后，需要将其选中状态取消，也就是selected属性为false
2.对事件委派的理解，为什么双击选项这个功能需要使用事件委派
①普通事件绑定与事件委派的区别？
普通事件绑定：jq对象.事件类型（function（）{ }）
事件委派：已存在的jq对象.on(‘事件类型’，‘后代选择器’，function（）{})
普通事件绑定对于未来新增的元素不存在事件行为。事件委派就是先把事件绑定在已存在的父辈元素上，然后派发给他的后代（包括新增的）。
②为什么使用事件委派
第一、新增的元素也会存在事件行为。
第二、提高效率，减少注册次数。

3.向上，向下移动。
①需要考虑到如果两边同时有选中选项时，应该只在本下拉框中上下移动。
②如果想要同时上下移动一个下拉框中的多个选项，这是应该移动到那个选项的前面或后面

weixin_45070265

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
jq实现左右选项移动功能（穿梭框）

布局效果图功能描述1.点击——>按钮可以将左边选中的选项移动到右边2.点击<——按钮可以将右边选中的选项移动到左边3.点击===>按钮可以将左边的全部移动到右边4.点击===>按钮可以将右边的全部移动到左边5.双击选项可以将该选项移动到对面6.点击‘上’按钮可以将左边和右边选中的选项向上移动7.点击‘下’按钮可以将左边和右边选中的选项向下移动代码<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录