Hide/Show Select2

Question

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')) {
        $('#states').parent().show();
    }
    else {
        $('#states').parent().hide();
    }
});

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

Caducity

Answer 1

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')) {
        $('#states').next(".select2-container").show();
    }
    else {
        $('#states').next(".select2-container").hide();
    }
});

So I have been taking the same approach you have

Revocable

It's useful, but not to the point of the question... It's just another workaround. – Caducity

It is, but I doubt you will find what you are looking for. Very few plugins have a built in way to hide themselves. – Revocable

You've got to be kidding me. This is horrible, the inability to show/hide the Select2 in a straightforward way. This sucks – Underhanded

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. – Revocable

I'm trying this approach, but I have a select2 that needs to be hidden on page load. This seems to cause a "rendering" issue for the select2 inputs when they become shown. The width's are not taking into account the dropdown's contents basically. – Cannelloni

Answer 2

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.

Phyl

Answer 3

This worked for me..

jQuery("#my-select2").select2().next().hide();

Broadminded

I didn't even need to add the call to select2(). Simply $('#my-select2').next().hide() and $('#my-select2').next().show() was enough. – Countryandwestern

Answer 4

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

$("#user-box").select2({
    containerCssClass : "show-hide"
});

...and then hide it when you want with

$(".show-hide").parent().parent().hide();

Maloriemalory

Answer 5

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

or

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

Cloistered

Answer 6

Put the Select2 into a div. In this case I'm just declaring a div #select as a Select2:

$('#select').select2();

<div id='select_parent'><div id='select'></div></div>

Show/hide the div containing the Select2:

$('#select_parent').hide();

Pathology

Answer 7

My workaround was to first destroy the select2 then hide the select

  $("#select").select2('destroy');
  $("#select").attr('style','display: none');

And to show it again I remove the display: none and recreate the select2

$("#select").attr('style', '');
$("#select").select2();

Obs: Make sure to use the same configuration of select2 when recreating it, or use the data-* attributes.

Faun