Hiding select2 options

Question

I'm trying to hide some of the select2 options, but when I do something like this:

<option style="display: none;">...</option>

select2 ignores it, unlike when I disable an option, or make it "readonly".

Any ideas?

Answer 1

I stumbled upon this subject when looking for an answer to the same problem and i resolved it using the 'templateResult' callback of select2.

<select id="mySelect">
  <option value="1" data-show="1">1</option>
  <option value="2">2</option> <!-- option i want to hide -->
</select>

At the initialization of my select2 :

var dataIWantToShow = '1';
$('#mySelect').select2({
    templateResult: function(option) {
        var myOption = $('#mySelect').find('option[value="' + option.id + '"');
        if (myOption.data('show') == dataIWantToshow) {
            return option.text;
        }
        return false;
    }
});

To avoid having empty li displayed in the select2 list of options i added the following css :

li.select2-results__option:empty {
    display: none;
}

This solution does not add or remove options from the original select.

working fiddle

Answer 2

You should remove the options which should not be available. If you need to do it dynamically in JavaScript, you can clone the fully populated <select> element at first. At any given time you can remove all options from the original <select> and copy back only those options which you'd like to be available at the moment. That way you don't loose any styling, meta-data, sorting etc.

Here is an example:

$(document).ready(function () {
    var select = $(".yourselect");
    var selectClone = select.clone();

    function updateSelect() {
        var oldVal = select.val();

        // first, remove all options
        select.find("option").remove();

        // now add only those options that should be available from the clone
        // replace "data-show='yes'" with whatever you criteria might be
        var options = selectClone.find("option[data-show='yes']").clone();
        select.append(options);

        // restore previously selected value if it is still possible
        if (select.find("option[value='" + oldVal + "']").length === 0) {
            oldVal = "";
        }
        select.val(oldVal);

        // update select2
        select.trigger('change');
    }
});

Answer 3

Maybe the question is old but I have got here for the same problem. I am using the select2 v. 3.5.1, I was able to fix it like this:

I add a class on the option that I want to hide:

<option class="hide_me">...</option>

that is supposed to be something like:

.hide_me {
  display: none!important;
}

Basically I do the same you was doing by the style attribute but using a css class. The style attribute doesn't work for me too (even when the multi select2 seems to hide the selected options that way).

Hope this can help.

Answer 4

why you need that? Simple: remove this option!

If you need to show only in some cases you can use javascript.

using jQuery example:

if (condition) {
    $('#yourselect').append('<option value="foo" selected="selected">Foo</option>');
}

Answer 5

You can disable it with disabled="disabled" attribute.

<option value="4" disabled="disabled">Product 4</option>

Refer this fiddle