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

$('.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 2

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:

$( selector ).select2({
  templateResult: resultState
});

Then I provide the resultState callback function which copies all classes from the original <option> to the select2-option. This allows us to show/hide options in select2 depending on the class we assign to the original option.

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 .select2-results__option.optInvisible {
    display: none;
}

Now I can easy show or hide hide any options in the select2-container by adding the optInvisible class to the <option>:

<select>
  <option class="optInvisible">Choose one</option>
  <option value="1">1</option>
</select>

Or you could also update it dynamically using addClass("optInvisible") or removeClass("optInvisible").

May this helps anyone ;) Greetings

Answer 3

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 4

I just made a variation of he answer 6 and changed class by hidden attribute, so this way every option with hidden attribute will also be hidden in a select2 container like below that the option 1 will be hidden:

<select class='mySelect'> My Select 2
<option hidden>1</option>
<option >2</option>
<option >3</option>
</select>

$('.mySelect').select2({templateResult: hideSelect2Option});

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

   

Answer 5

This code works. Tested with version Select2 4.0.6

    <select class='select2'>
        <option>WillShow</option>
        <option willHide='true'>WillHide</option>
    </select>

    <style>
        li[aria-disabled='true'] {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(".select2").select2();
        $(".select2 option[willHide='true']").prop("disabled", true);
    </script>

Answer 6

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