文章/答案/技术大牛

发布

社区首页 >问答首页 >在两个选择标记之间移动jQuery列表项

问在两个选择标记之间移动jQuery列表项
EN

Stack Overflow用户

提问于 2022-10-07 15:28:53

回答 1查看 25关注 0票数 -1

在html上有两个select元素。第一个选项有一些选项/项，当我双击其中一个选项时，它将从第一个select中删除并附加到第二个select。然后，如果我双击第二个选择上的一个选项，该选项将被移回第一个列表。

例如：

<select  multiple="multiple" id="list1">

    <option value="banana">banana</option>
    <option value="orange">orange</option>
    <option value="apricot">apricot</option>
    <option value="lemon">lemon</option>

</select>

<select  multiple="multiple" id="list2">
</select>

jQuery部件如下所示

    $(function () {

        $("#list1 option").dblclick(function () {

            $("#list1 option:selected").remove().appendTo("#list2");

        });


        $("#list2 option").dblclick(function () {
            $("#list2 option:selected").remove().appendTo("#list1");

        });

    });

我可以将"list1“中的一个选项移到"list2”中，但不能将其从"list2“移回"list1”。

$(function () {

            $("#list1 option").dblclick(function () {

                $("#list1 option:selected").remove().appendTo("#list2");

            });


            $("#list2 option").dblclick(function () {
                $("#list2 option:selected").remove().appendTo("#list1");

            });

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  multiple="multiple" id="list1">
    
        <option value="banana">banana</option>
        <option value="orange">orange</option>
        <option value="apricot">apricot</option>
        <option value="lemon">lemon</option>

    </select>
    
    <select  multiple="multiple" id="list2">
    </select>

javascript

html

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-07 15:57:50

要确保dblcick事件将触发动态移动的元素，请从选择器中删除id，并使其成为一个函数，该函数将检查单击了哪个选择，并将其移动到另一个

$("option").dblclick(function () {
    const clickedElement = event.target;
    const appendToId = (event.target.parentElement.id === 'list1') ? 'list2' : 'list1';

    clickedElement.remove();
    $(clickedElement).appendTo('#' + appendToId);
});

select { width: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select  multiple="multiple" id="list1">
    <option value="banana">banana</option>
    <option value="orange">orange</option>
    <option value="apricot">apricot</option>
    <option value="lemon">lemon</option>
</select>

<select  multiple="multiple" id="list2">
</select>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73989459

复制

相似问题

问在两个选择标记之间移动jQuery列表项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在两个选择标记之间移动jQuery列表项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在两个选择标记之间移动jQuery列表项
EN