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".

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

Answer 2

If you want to achieve it , maybe you can modify the select2.js code,

First i hidden the second option , originally it will not work when you use

select2 plugin ,

<select id="test" style="width:100px">
  <option></option>
  <option value='1'>1</option>
  <option value='2' style="display:none">2</option>
</select>

Second i will modify the select2.js code: line 926

i add extra condition statement && element.css('display') != 'none' here

 process = function (element, collection) {
     var group;
     if (element.is("option") && element.css('display') != 'none') {
         if (query.matcher(term, element.text(), element)) {
              collection.push(self.optionToData(element));
              }
     } else if (element.is("optgroup")) {
              group = self.optionToData(element);
              element.children().each(function (i, elm) { 
                       process(elm, group.children); 
                   });
              if (group.children.length > 0) {
                       collection.push(group);
              }
      }
     };

JSBIN http://jsbin.com/qusimi/1/edit

Answer 3

$('.selector').remove(); 

And then append the option according to position it appear in select2 :

To appear as first option then :

$('.selector')
.prepend('<option value="option-value" class="option-value">Option Label</option>');

To appear as last option then :

$('.selector')
.append('<option value="option-value" class="option-value">Option Label</option>');

To appear as after any of the option then :

$('<option value="option-value" class="option-class">Option Label</option>')
.insertAfter($('.selector option:first-child'));

Or

$('<option value="option-value" class="option-value">Option Label</option>')
.insertAfter($('.selector > .option-class'));

---

OR

We can disable/enable the option using jquery, instead of hiding.

$('.selector').prop('disabled', 'disabled');

$('.selector')
.prop('disabled', !$('.selector').prop('disabled'));

Answer 4

I just invested 3 hours and found a very clean and easy solution for me dynamically showing/hiding options in a select2-container.

First, i create the select2 with this option: { .. templateResult: resultState, .. }

Then I provide this callback to copy all classes from the original option to the select2-option (I show/hide options in dependency of their classes)

    function resultState(data, container) {
    if(data.element) {
        $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
}

In my css I declared this line:

.select2-container--default .select2-results__option.optInvisible {
display: none;}

Now I can easy show or hide hide any options in the select2-container by using addClass("optInvisible") or removeClass("optInvisible")..

May this helps anyone ;) Greetings

Answer 5

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 6

this is small varation of the accepted answer, actually I had to modify the accepted answer to make it work, I had to change the class names, maybe this is because different versions of Select2 library

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

Answer 7

For select2 3.5, this works for me:

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