Select2仅更新一次禁用的选项

Question

I have several select2 dropdown lists (containing the same options), and i need that each option could only be picked once.

Using select2 events system, each time a dropdown is opened, i go through the list and disable all the options that were selected on any of the other dropdowns

$('body').on('select2:open', '.resCombo', function (event) {
    var $el = $(event.target);
    $el.find('option').removeAttr('disabled');
    $('.resCombo').not($el).find('option:selected').each(function (index,el) {
       console.log($(el).val());
       $el.find('option[value="'+ $(el).val() +'"]').attr('disabled','disabled');
     })
  $el.trigger('change.select2');
});

it works great the first time i change something at any of the dropdowns, but never on the second try.

Answer 1

Select2 cache the disable property and don't listen to the changes of it. The quick fix for it is to initialize select2 each time you change the property. They have an open request for this feature, you can use this fix, although they haven't merged it yet.

Link to pull request