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 to click them since they're hidden.

I've looked through the docs and have found things related to disabling, unfortunately I very specifically want the ability to hide items. Does anyone have advice on how to accomplish this?

Were it possible to do something like have the select do some specific mapping between the original <option> element and the select2 copy of that element, that would work as well. As an example, say, "if the original <option> has such class or has such attribute, the resulting item in the select dropdown will be constructed this way".

question from:https://stackoverflow.com/questions/25064487/select2-hide-certain-options-dynamically

Answer 1

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