Question

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

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

当我在输入框中键入文本时，我在源列表框上创建了一个过滤器，然后第一个列表框根据我的要求给出了过滤结果。然后我点击添加按钮＆gt; 项目移到右侧，也没关系，但是当我点击输入文本框并按回斜杠时，右移项目将返回升降列表。这是错误的。

有人可以为此提供帮助吗？

 <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中的原始选项。

它们很旧，包含你刚搬过的那些。再次附加它们你会抓住它们（特别是当它们现在在新列表中时）并再次将它们放入旧列表中。

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

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

            //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
                }
            }

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

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

1 个答案: