'Select2 not working correctly when options in the dropdown are being enabled or disabled

I'm using select2 for a dropdown so the use could add new tasks for a project. When the task is being selected - a row in a table is being added and the option is being disabled in the dropdown as we don't want to add the same task more than once. However if we want to remove a task from the table - when the delete button is clicked - it should enable the option in the dropdown. Here is what is happening though: I have 2 tasks added in that table so those tasks are disabled in the dropdown. I delete the first one then the second one - both options are enabled in the dropdown. Now I do this - I delete the first task, then I'm clicking on the dropdown to see the option - the task I have deleted from the table is enabled. When I delete the last task and check again the dropdown - the last task is still disabled even that it's not longer in the table. So select2 is working fine when deleting the tasks in the table without clicking the dropdown. Here is the function that is enabling the option and removing the row from the table:

        function DeleteRow(sender) {
        var taskId = $(sender).parent().parent().attr("task-id");

        var option = $('#add-task-select').find('option[value="' + taskId + '"]');
        option.prop('disabled', false);
       
        //var taskId = option.attr('value');

        $('#add-task-select').trigger('change');

        $(sender).parent().parent().remove();
    }
jqueryjquery-select2


Solution 1:[1]

Try to call select2 again when options in the dropdown are being enabled or disabled :

$('#add-task-select').select2();

OR

$('.select2').select2();

Solution 2:[2]

.select2-results__option--highlighted {
background: red !important;
color: #fff !important;}

Solution 3:[3]

Try to use like this:

$('#add-task-select').select2({
  dropdownParent: $('#yourModalName')
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Charlie74
Solution 2 Muhammad Junaid
Solution 3 Gabriel

Related Questions