Переместить элемент из одного списка выбора в другой

Question

Переместить элемент из одного списка выбора в другой

0

Проблема во время фильтрации списка и переместить элемент в другой список выбора

У меня странный сценарий, когда я перемещаю один элемент списка в другой список с помощью jQuery.

Я сделал фильтр в поле списка источников, когда я набираю текст в поле ввода, а затем в первом списке я получаю отфильтрованный результат по мере необходимости. Затем я нажимаю кнопку Добавить кнопку >, перемещенную в правую сторону, это также нормально, но когда я нажимаю на текстовое поле ввода и нажимаю обратно косую черту, правый сдвинутый элемент возвращается к лифту. что неправильно.

Может ли кто-нибудь помочь в этом?

См. Работа здесь

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

Jaswinder Singh 22 март 2014, в 08:55

Источник

Теги:

jquery

html

1 ответ

Ещё вопросы

Individumm · Answer 1 · 2014-03-22T05-57-00.000Z

Проблема. Если вы кешируете свои параметры в первый раз в состоянии 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
                }
            }

Можете ли вы сказать, где я должен изменить код.
Посмотрите на мои правки, фрагмент должен помочь вам. Сама реализация по-прежнему ваша работа.