Select2を非表示/表示

Question

私はselect2を隠したり表示したりしたいのですが、APIでメソッドを見つけることができません。

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

をしかし、私は、誰が助けることができれば、さらにはAPIで、このような方法が存在するかどうかを知りたいのです：私はこのように、親を隠し、回避策を使用しています。

Answer 1

私は似たようなことをしますが、常に次のノードであるselect2コンテナを開始点から隠すように見えます。

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

だから私はあなたが

Answer 2

もう一つの回避策を持って同じアプローチを取っている - あなたは創造

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

でオブジェクトをSELECT2にクラスを追加...そしてときにそれを隠すことができますあなたとしたい

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

Answer 3

問題は、関連するすべてのアイテムを非表示にする必要があることです。 select2ドロップダウン（プラグインが生成したすべての魔法を実行）。

私は、select2ドロップダウンを含むdivを使ってこのdivを表示/非表示にしました。