[解決済み】ブートストラップ・モーダルに埋め込むとSelect2が機能しない
2022-03-24 01:15:25
質問
bootstrapのモーダルでselect2(input)を使用すると、何も入力できません。無効になっているような?モーダルの外ではselect2は問題なく動作します。
動作例です。 http://jsfiddle.net/byJy8/1/ のコードを使用します。
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
<form class="form-horizontal">
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="vdn_number">Numer</label>
<div class="controls">
<!-- seleect2 -->
<input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
JS
$("#vdn_number").select2({
placeholder: "00000",
minimumInputLength: 2,
ajax: {
url: "getAjaxData/",
dataType: 'json',
type: "POST",
data: function (term, page) {
return {
q: term, // search term
col: 'vdn'
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
}
});
を回答してください。
ここでは、簡単な フィックス
で、こちらが「正しい方法」です。 ブートストラップ・モーダルに埋め込むとSelect2が機能しない
解決方法を教えてください。
OK、動作するようになりました。
変更
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
になります。
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
(削除 tabindex="-1"。 モーダルから)
関連
-
[解決済み】Chrome Developer ToolsでリソースがDocumentと解釈され、MIMEタイプapplication/jsonの警告で転送される。
-
[解決済み] jQuery - 不正な呼び出し
-
[解決済み] どのようにjQueryでJSON配列をループするのですか?
-
[解決済み] jcarouselliteでbtnNextがクリックされたときに変数をインクリメントするには?
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] ブートストラップ・モーダルにデータを渡す
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] Bootstrapのモーダルを閉じる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQuery: outer html() [重複]。
-
[解決済み] jquery fadeIn が動作しない。
-
[解決済み] カルーセルで画像を中央に配置する方法
-
[解決済み] Jquery.comのサイトのソースファイルはどこにあるのでしょうか?ダウンロードのリンクがないのですが
-
[解決済み] jQuery ValidateプラグインでaddMethodを使用する
-
[解決済み] jQueryでページスクロールをプログラム的に無効にする方法
-
[解決済み] 2つの画像を切り替えるにはどうすればよいですか
-
[解決済み] JWplayer 再生クリックでフルスクリーン表示
-
[解決済み] jquery-rails」と「jquery-ui-rails」は、1つのプロジェクトで管理することができるのでしょうか?
-
[解決済み] jquery form が期待通りに動作しない。ajaxForm が関数でない。