Javascript 将搜索选项添加到选择列表

我有两个多选列表，通过单击它们可以相互交换列表值。我尝试将搜索功能添加到填充列表选择列表，该列表在我单击列表元素之前工作正常。即使该值已从列表中删除，搜索选项仍会在其中添加已移动的元素。查看演示

---

这是因为在加载文档后，您已经将值缓存在opts中，并且在更新select时不会更新它

一旦项目从列表中移出，您必须重新评估OPT以获得新的值集

$('.select-cities').click(function () {
    $('.select-cities option:selected').remove().appendTo('.chosen-cities');
    opts = $('#optlist option').map(function () {
        return [[this.value, $(this).text()]];
    });
});

---

我认为这是因为，您在opts中存储了一次值，然后一直使用它。但是您没有从每次搜索中使用的选项中删除项目。我如何更正它？现在它甚至没有搜索列表中的元素。是的，它工作正常，但仍然存在问题。当我再次将该值添加到列表Selected cities from Selected cities时，搜索无法搜索values@Kunal您必须在两个单击处理程序中应用相同的修复，如…非常感谢先生的帮助。只有一件事会引起问题，你可能会错过。执行搜索并选择值时，列表不会显示所有值。它仅包含搜索结果中显示的值。对此可以做些什么？@Kunal这是您试图实现它的方式的问题，var optlist=$'optlist'。empty；从原始列表中删除选项，您可以将其保存在缓存中，直到您单击某个内容为止。单击后，缓存将成为匹配元素的列表。您可能希望有一个选项数组，或者有一个隐藏的模板下拉列表，以便在搜索为空时返回值。

$('.select-cities').click(function () {
    $('.select-cities option:selected').remove().appendTo('.chosen-cities');
    opts = $('#optlist option').map(function () {
        return [[this.value, $(this).text()]];
    });
});