CODEWITHSUNDEEP
jqueryjquery-select2
Ivan
Ivan

Reputation: 63

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

Upvotes: 1

Views: 2299

Answers (3)

Gabriel
Gabriel

Reputation: 11

Try to use like this:

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

Upvotes: 0

Muhammad Junaid
Muhammad Junaid

Reputation: 1

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

Upvotes: 0

Khribi Wessim
Khribi Wessim

Reputation: 720

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

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

OR

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

Upvotes: 2

Related Questions