Select options disappearing when appending new option

做~自己de王妃 提交于 2020-05-17 06:55:14

问题


I'm currently creating a interface to select an option from one select element on double click, and append it to another select element.

The issue I am coming across is when doing so, it is added and visible, however all other options disappear in the destination select, until I click on the option and then click off.

You can see this in action here: https://i.imgur.com/jSXoIAi.gifv

My current implementation is as follows:

$('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');
});

The underlying HTML is being constructed exactly how it should.

Any ideas?


回答1:


As pointed out the issue was with the sortSelection function. I'm not quite sure why, but regardless I don't actually require this function anymore.

Removing said function has resolved the issue :)



来源:https://stackoverflow.com/questions/61375820/select-options-disappearing-when-appending-new-option

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!