Je souhaite masquer ou afficher mon select2, mais je ne trouve pas de méthode dans l'API. J'utilise une solution de contournement, en cachant le parent, comme ceci:
$(document).on('change', '.country', function () {
if ($(this).val() == $(this).data('current-countryCode')) {
$('#states').parent().show();
}
else {
$('#states').parent().hide();
}
});
Mais j'aimerais savoir si quelqu'un pourrait aider ou s'il existe même une telle méthode dans l'API.
Je fais la même chose, mais je cache le conteneur select2, qui est toujours le prochain nœud à partir du point de départ, de sorte
$(document).on('change', '.country', function () {
if ($(this).val() == $(this).data('current-countryCode')) {
$('#states').next(".select2-container").show();
}
else {
$('#states').next(".select2-container").hide();
}
});
J'ai donc adopté la même approche que vous
Le problème est que vous devez masquer tous les éléments associés au menu déroulant select2 (tout ce que le plugin génère pour faire la magie).
J'ai résolu en utilisant un div qui contient la liste déroulante select2 et affiche/masque cette div.
Une autre solution de contournement: vous pouvez ajouter une classe à l'objet select2 à la création.
$("#user-box").select2({
containerCssClass : "show-hide"
});
... et ensuite le cacher quand vous voulez avec
$(".show-hide").parent().parent().hide();
Cela a fonctionné pour moi ..
jQuery("#my-select2").select2().next().hide();
J'utilise 4.0.6
https://select2.org/programmatic-control/methods
fermer
$('#YourId').select2('close');
ouvrir
$('#YourId').select2('open');