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.

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

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.

Answer 3

This worked for me..

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