Выберите опции, исчезающие при добавлении новой опции

Question

В настоящее время я создаю интерфейс для выбора опции из одного элемента select по двойному щелчку и добавления ее к другому элементу select.

Проблема, с которой я сталкиваюсь, заключается в том, что она добавляется и видимый, однако все остальные параметры исчезают в выбранном пункте назначения, пока я не нажму на параметр, а затем не нажму.

Вы можете увидеть это в действии здесь: https://i.imgur.com/jSXoIAi.gifv

Моя текущая реализация выглядит следующим образом:

$('body').on('dblclick', '#availableColumnsSelect > option', function (e) {

        var option = $(this);

        //Add option to destination
        displayColumnsSelect.append($('<option>', { value: option.val(), text: option.val() }));

        //Remove option from source
        option.remove();


        //Sort the select options
        sortSelect("#displayColumnsSelect");


        var optionsAvailable = $("#availableColumnsSelect > option:not([disabled])").length;


        if (optionsAvailable == 0) {
            $("#noSelectedText").removeClass('hidden');
        }
        $("#noSelectedText").addClass('hidden');
});

Базовое HTML строится именно так, как и должно.

Есть идеи?

Answer 1

Как указывалось, проблема была с функцией sortSelection. Я не совсем уверен, почему, но, несмотря на это, я больше не нуждаюсь в этой функции.

Удаление указанной функции решило проблему:)