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

Question

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

Charlie74 · Accepted Answer · 2021-09-12 18:42:03Z

2

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

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

OR

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

edited Sep 12, 2021 at 18:42

Charlie74

2,91317 silver badges23 bronze badges

answered Sep 11, 2021 at 11:59

Khribi Wessim

8206 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2796515 Over a year ago

I want to add, in my case, I was hiding a parent div and when I "unhid" it, the dropdown would not work although I could tell the values were there by inspecting it. This fixed for this issue as well. Great solution.

Muhammad Junaid · Accepted Answer · 2022-03-15 21:28:40Z

0

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

answered Mar 15, 2022 at 21:28

Muhammad Junaid

1

1 Comment

Muhammad Junaid Over a year ago

in select2 sometime an options in dropdown may not be higlighted with backgroundcolor and make confisuion in which option we are currently. By adding that style it would work

Gabriel · Accepted Answer · 2022-05-10 01:47:37Z

0

Try to use like this:

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

answered May 10, 2022 at 1:47

Gabriel

112 bronze badges

1 Comment

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related