Select2: Hide certain options dynamically

Question

Basically what I\'m looking for is the ability to hide options from the dropdown of select items. So, technically they would still be options, but you just wouldn\'t be able

Answer 1

I had a similar requirement. Hiding was preferred, but many of these answers were uncertain for several browsers or too complicated. Changing select2 code was also out of the question.

My solution was to store a copy of the options for each select in memory as an array. When I wanted to "hide" an option, i would use jQuery remove(). When I wanted to "unhide", I would re-add it to that select's options.

Remember to call .trigger("change") on the select if it is possible you are hiding an option that might be currently selected.

Answer 2

For select2 3.5, this works for me:

.select2-result.select2-result-unselectable.select2-disabled {
    display: none;
}

Answer 3

Would adding the following CSS Rule to the page solve your problem?

.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none;
}

Basically it would hide a disable option instead of displaying it with a gray background.

Use disabled instead of display:'none' in your options list also.

JS Bin

Answer 4

If somebody wants a another option using jquery data tags this woks for me:

$('.select2 option').each(function(){
        if ($(this).data('condition') != 'true' ) {
          $(this).wrap('<div></div>')
        } else {
          $(this).unwrap('div')
        }
})