Ausblenden/Einblenden Select2

Question

Ich möchte meine select2 verbergen oder anzeigen, aber ich kann keine Methode in der API finden. Ich bin mit einem Problem umgehen, indem die Eltern versteckt, wie folgt aus:

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

Aber ich möchte wissen, ob jemand helfen könnte, oder wenn überhaupt existiert, ein solches Verfahren in der API.

Answer 1

Ich mache eine ähnliche Sache, aber ich verberge den select2 Container, der immer der nächste Knoten vom Startpunkt ist, so wie es aussehen würde.

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

So wurde ich den gleichen Ansatz Sie

Answer 2

Eine weitere Abhilfe haben - können Sie eine Klasse hinzufügen Objekt bei der Erstellung

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

... Select2 und dann verstecken, wenn Sie wollen mit

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

Answer 3

Das Problem ist, dass Sie alle damit verbundenen Elemente ausblenden müssen das Dropdown-Menü select2 (alles, was das Plugin für die Magie generiert).

Ich löste mit einem Div, das das Dropdown-Menü select2 enthält und dieses div anzeigen/ausblenden.