web-dev-qa-db-ja.com

javascript / jqueryを介してselect2ドロップダウンを閉じる

こんにちは、jqueryまたはjavascriptを使用してselect2ドロップダウンを適切に閉じるにはどうすればよいですか？

今のところselect2-dropdown.toggle()を使用して閉じています。

しかし、それは単にリストを非表示にし、select2ボックスがまだ強調表示されていることに気付きました enter image description here

私はそれを適切に閉じて、このような結果を思い付くことができるようにするために、それに焦点を当てるなどを失いたい enter image description here。

ちなみに、これらのselect2ボックスはbootstrapモーダルの下にあるため、スクリーンショットが暗いので、Enterキーを押すたびに表示されます。

アドバイスは本当にいただければ幸いです！前もって感謝します

javascriptjqueryhtmltwitter-bootstrapjquery-select2
16
melvnberd

これは私のために働きます$("#select2-drop-mask").click();

8
melvnberd

これは古い質問であることは承知していますが、APIを使用してこれを行うには、次のようにします。

Select2 API

 $("#select2-drop-mask").select2("close");

この質問は、ブートストラップモーダルダイアログについても言及しています。

誰の情報でもこれはあなたがそれをする方法です：

ブートストラップ

$('#myModal').on('hidden.bs.modal', function () {
  $('#select2-drop-mask').select2("close");
})

ブートストラップ2

$('#myModal').on('hidden', function () {
   $('#select2-drop-mask').select2("close");
})
30
hutchonoid

V4.0では、他の回答はどれもうまくいきませんでした。 jQueryを使用してマスクだけを選択しても効果はありませんでした。選択ボックス自体のIDを使用する必要がありました。

$("#mySelectElement").select2("close")

これも機能しましたが、好ましくない場合があります。

$("#mySelectElement").select2().trigger("select2:close");

ドキュメント

また、Bootstrap 3の場合、hidden.bs.modalイベントが遅すぎて、select2マスクがアニメーション中に1秒間残ります。 hide.bs.modalは、よりスムーズに機能しました。

$('#modalYourModal').on('hide.bs.modal', function () {
    //close select2 in case its open
    $("#mySelectElement").select2("close");
});
10
shanabus

select2-dropdown-*mask*は機能しませんでしたが、以下は機能しました。

$('#select2-drop').select2('close');
6
LimaNightHawk
select2-dropdown.blur();

これはあなたが探しているものだと思います。 ここ あなたは今私が作成したJSFiddleの例を持っています。

1
mbecares