将项目从一个选择列表移动到另一个

Question

过滤列表框并将项目移动到另一个选择列表时出现问题

当我使用 jQuery 将一个列表框项移动到另一个列表框时，我遇到了一个奇怪的场景。

当我在输入框中键入文本时，我在源列表框上做了一个过滤器，然后第一个列表框根据我的需要给我过滤的结果。然后我点击添加按钮>项移到右侧，也OK， 但是当我单击输入文本框并按反斜杠时，右移项目返回到提升列表。这是错误的。

有人可以帮忙吗？

See Working here

 <script>
    var showOnlyOptionsSimilarToText = function (selectionEl, str, isCaseSensitive) {
        if (isCaseSensitive)
            str = str.toLowerCase();
        // cache the jQuery object of the <select> element
        var $el = $(selectionEl);
        if (!$el.data("options")) {
            // cache all the options inside the <select> element for easy recover
            $el.data("options", $el.find("option").clone());
        }
        var newOptions = $el.data("options").filter(function () {
            var text = $(this).text();
            if (isCaseSensitive)
                text = text.toLowerCase();
            return text.match(str);
        });
        $el.empty().append(newOptions);
    };

    $(document).ready(function () {
        $("#btnAddAllBeneficiaries,#btnRemoveAllBeneficiaries").click(function (event) {
            var ID = $(event.target).attr("ID");
            if (ID == "btnRemoveAllBeneficiaries") { if (!confirm("Do you want to remove item")) { return; } }
            var ChooseFrom = ID == "btnAddAllBeneficiaries" ? "#BeneficiariesList" : "#assignedBeneficiariesList";
            var moveTo = ID == "btnAddAllBeneficiaries" ? "#assignedBeneficiariesList" : "#BeneficiariesList";

            var SelectData = $(ChooseFrom + " > option").toArray();
            $(moveTo).append(SelectData);
            SelectData.remove;
        });


        $("#btnAddBeneficiaries,#btnRemoveBeneficiaries").click(function (event) {
            var ID = $(event.target).attr("ID");
            if (ID == "btnRemoveBeneficiaries") { if (!confirm("Do you want to remove item")) { return; } }
            var ChooseFrom = ID == "btnAddBeneficiaries" ? "#BeneficiariesList" : "#assignedBeneficiariesList";
            var moveTo = ID == "btnAddBeneficiaries" ? "#assignedBeneficiariesList" : "#BeneficiariesList";

            var SelectData = $(ChooseFrom + " :selected").toArray();
            $(moveTo).append(SelectData);
            SelectData.remove;
        });

        $("#SearchBeneficiaries").on("keyup", function () {
            var userInput = $("#SearchBeneficiaries").val();
            showOnlyOptionsSimilarToText($("#BeneficiariesList"), userInput, true);
        });
    });
</script>

Answer 1

问题：如果您第一次在状态 A 中缓存选项，然后移动它们（状态 B），然后再次进入该方法，您的“缓存”选项不是最新的并且来自状态 A ！因此，过滤选项不适用于状态 B 中的已操作选项集，而是适用于您第一次进入函数时来自状态 A 的原始选项。

它们很旧，包含您刚刚移动的那些。再次添加它们，无论它们在哪里（尤其是当它们现在在新列表中时），您都可以将它们抓取并再次将它们放入旧列表中。

解决方案：如果添加/删除任何项目，则必须操作您的缓存项目（添加/删除选项）。然后你的错误将被修复。

看看这段代码。您需要完成并将其添加到您的两个点击处理程序中：

            //Keep "cache" up-to-date
            var cacheList = $("#BeneficiariesList").data('options');
            if(cacheList) {
                //List exists, manipulate it
                if(ID == "btnAddAllBeneficiaries") {
                    //Remove SelectData-items from the cacheList
                }
                else {
                    //Add SelectData-items to the cacheList
                }
            }