仅使用一个选项在两个选择之间移动选项

Question

尝试将option - 标记移至select列表。

HTML：

<select name="lista" id="lista" multiple="multiple">
     <option value="1">a</option>
     <option value="2">b</option>
     <option value="3">c</option>
     <option value="4">d</option>
</select>

<select id="listb" name="listb[]" multiple="multiple"></select>

jQuery的：

$("#lista")
    .change(function() {
        $("#lista option:selected").each(function() {
            $(this).remove().appendTo('#listb').prop("selected", "selected");
        });
    })
    .trigger("change");

$("#listb")
    .change(function() {
        $("#listb option:selected").each(function() {
            $(this).remove().appendTo('#lista').prop("selected", "");
        });
    })
    .trigger("change");

如果我将很多项目从ListA移动到ListB，那么效果很好。但是当ListB中只有一个项目时，我无法将其返回到ListA，因为我发现触发器change - 事件无法触发。我怎么能这样做？

Answer 1

如果将选择的selectedIndex设置为-1，则应在选择项目时触发更改事件。

$('#listb').prop('selectedIndex', -1);