Hide / Show Select2

Question

I want to hide or show my select2, but I cannot find the method in the API. I use a workaround to hide the parent, for example:

$(document).on('change', '.country', function () {
    if ($(this).val() == $(this).data('current-countryCode')) {
        $('#states').parent().show();
    }
    else {
        $('#states').parent().hide();
    }
});

But I would like to know if anyone can help or even there is such a method in the API.

Answer 1

I am doing a similar thing, however I am hiding the select2 container, which is always the next node from the starting point so that it looks.

$(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 take the same approach that you have

Answer 2

Another workaround is that you can add a class to the select2 element when creating

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

... and then hide it whenever you want with

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

Answer 3

, , select2 (, ).

div, select2, / div.