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?

Acculturize

I solve the same problem , you could see this topic , #25064987 – Deltoid

Answer 1

I resolved this problem with an epic solution.

My version of select2 is 4.0.5 and only requires using the hidden property (you can change its logic) in each hidden options, without requiring style="display:none" (more clean for me).

<select class="select2">
   <option value="">Select</option>
   <option value="1">One</option>
   <option value="2" hidden>Two</option>
   <option value="3">One</option>
</select>

Right now, the only code needed is in the initialization of select2:

$('.select2').select2({
   templateResult: function(option) {
      if(option.element && (option.element).hasAttribute('hidden')){
         return null;
      }
      return option.text;
   }
});

hidden is a standard property and you can dynamicaly change it with attr and removeAttr jQuery methods: https://www.w3schools.com/tags/att_global_hidden.asp

Burk

I don't see it working in my case. Can you take a look? jsfiddle.net/vh2L1oct/4 – Deandre

Answer 2

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

Peony

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.

Rutharuthann

IDK about select2 v3.5.1, but this solution just doesn't work in v4. – Carlynne

Answer 4

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');
    }
});

Polio

Answer 5

You can disable the option and then add some css to hide the options:

<option disabled="disabled">text</option>

CSS:

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

Cham

Answer 6

Try this code

Add this style in your page

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

add a attribute in option in Select2 dropdown

<select class='select2'>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option data-status="0" value="3">Option 3</option>
</select>

add this Jquery Code for select2

$(".select2").select2();
$(".select2 option[data-status='0']").prop("disabled", true);

Haugen

Answer 7

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>');
}

Zimmermann

I already did that, but I was hoping for a more elegant solution. – Acculturize

I'm tired of answers that just tell you not to do something. What if he wants to preserve the sort order an option he plans to show again? – Lastditch

Answer 8

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

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

Refer this fiddle

Gifford

This doesn't hide the option... And your example was simple html, I'm talking about the select2 plugin. – Acculturize

Add some css and it will .select2-container--default .select2-results__option[aria-disabled=true] { display: none;} – Lodi