Hide/Show Select2

select2 hide selected options
select2 remove option
select2 reinitialize
check if select2 is initialized
select2 events
select2 initialize
select2 options

I want to hide or show my select2, but I can't find a method in the API. I'm using a workaround, hiding the parent, like this:

$(document).on('change', '.country', function () {
    if ($(this).val() == $(this).data('current-countryCode')) {
    else {

But I'd like to know if anyone could help or if even exists such a method in the API.

I do a similar thing, however I hide the select2 container which is always the next node over from the start point so it would look like.

$(document).on('change', '.country', function () {
    if ($(this).val() == $(this).data('current-countryCode')) {
    else {

So I have been taking the same approach you have

Methods, "Display Select2 provides options that allow you to directly affect how the container that holds the current selection is displayed." So please  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:

This worked for me..


Show/Hide options programaticaly · Issue #4991 · select2/select2 , I have 2 select2 inputs I need to control the visibility of but the will not hide with $('​#select').hide(). Is there a Show more code (HTML + JS). I'm trying to get a handle on the full dropdown menu in a jQuery select2 container in order to hide it. One other SO post refers to this but I couldn't see how to make it work. My fiddle shows 3

One more workaround – you can add a class to select2 object at creation

    containerCssClass : "show-hide"

...and then hide it when you want with


Select2 Visability, If I want to hide one select box then what should I do? Thanks! easiest way is to put select2 into some div you know about and then hide the  $('select').select2({ minimumResultsForSearch: 20 // at least 20 results must be displayed }); Hiding the search box Single select. For single selects, Select2 allows you to hide the search box using the minimumResultsForSearch configuration option. In this example, we use the value Infinity to tell Select2 to never display the search box.

The problem is that you have to hide all the items associated with the select2 dropdown (all that the plugin generates to do the magic).

I solved using a div that contains the select2 dropdown and show/hide this div.

Hide select2, I tried to use display: none; but when I navigate through the options with t Select2 4. Is there any wat to SHOW/HIDE just ONE (only ONE )  When dropdown is opened, items are rendered inside of ul.select2-results. Every single item is wrapped in li.select2-result, the one item that is hovered by mouse is li.select2-result.select2-highlighted. I would really appreciate if the

Easier by extending $.fn

    $.fn.toggleSelect2 = function(state) {
        return this.each(function() {
            $.fn[state ? 'show' : 'hide'].apply($(this).next('.select2-container'));

Then simply call it on the select element.

$('select').toggleSelect2(true); //Show


$('select').toggleSelect2(false); //hide

Select2 hide options, Various display options of the Select2 component can be changed: of custom data loading Select2 should be attached to an input type='hidden' tag, otherwise​  Appearance. The appearance of your Select2 controls can be customized via the standard HTML attributes for <select> elements, as well as various configuration options. Disabling a Select2 control. Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect.

Select2 3.5.3, You can use jQuery hide() method to hide the needed options, but before that you How do I show/hide any div element using jQuery or JavaScript when a  $(selector).show(speed,callback); The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).

How hide options in a select list using jQuery?, Select2: Hide certain options dynamically - hide. optInvisible { display: none;} Now I can easy show or hide hide any options in the select2-container by using  The hidden property hides the select but the tag is still rendered, and takes up space on the page. If you want to hide a select and not want it to appear at all, but still be able to interact with the DOM, here's some sample code:

Select2: Hide certain options dynamically - hide - html, <label class="wrapper" for="states">This label is stacked above the select</label​>. 2. <div class="button dropdown">. 3. <select id="colorselector">. 4. <option  To test whether Select2 has been initialized on a particular DOM element, you can check for the select2-hidden-accessible class: See this Stack Overflow answer). Destroying the Select2 control The destroy method will remove the Select2 widget from the target element.

  • It's useful, but not to the point of the question... It's just another workaround.
  • It is, but I doubt you will find what you are looking for. Very few plugins have a built in way to hide themselves.
  • You've got to be kidding me. This is horrible, the inability to show/hide the Select2 in a straightforward way. This sucks
  • This is several years old. If I was doing it to day, I would probably nest the select box (hence the select2 box) in a div and hide/show the whole darn thing, or figure out a way to put an id on the select2 when it was created.