jQuery在两个select标记之间移动列表项

Question

html上有两个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"；但不能将其移回"0"；list1"；从"；list2"；。

$(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>

Answer 1

要确保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>