嵌入在引導模式中時，Select2不起作用

本文翻譯自：Select2 doesn't work when embedded in a bootstrap modal

When I use a select2 (input) in bootstrap modal, I can't type anything into it. 當我在bootstrap模式中使用select2（輸入）時，我無法在其中鍵入任何內容。 It's like disabled? 這就像殘疾人？ Outside the modal select2 works fine. 在模態select2之外工作正常。

Working example: http://jsfiddle.net/byJy8/1/ code: 工作示例： 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>

  </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>

and js: 和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};
        }
    }
});

answers: 答案：

here you can find a quick fix 在這裏你可以找到一個快速修復

and here is 'the right way': Select2 doesn't work when embedded in a bootstrap modal 這裏是'正確的方法'： 當嵌入在引導程序模式中時，Select2不起作用

---

#1樓

參考：https://stackoom.com/question/1FZKK/嵌入在引導模式中時-Select-不起作用

---

#2樓

Ok, I've got it to work. 好的，我已經開始工作了。

change 更改

<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">

to 至

<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">

(remove tabindex="-1" from modal) （從模態中刪除tabindex =“ - 1” ）

---

#3樓

I found a solution to this on github for select2 我在github上爲select2找到了一個解決方案

https://github.com/ivaynberg/select2/issues/1436 https://github.com/ivaynberg/select2/issues/1436

For bootstrap 3, the solution is: 對於bootstrap 3，解決方案是：

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4 renamed the enforceFocus method to _enforceFocus , so you'll need to patch that instead: Bootstrap 4將enforceFocus方法重命名爲_enforceFocus ，因此您需要修改它：

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Explanation copied from link above: 從上面的鏈接複製的說明：

Bootstrap registers a listener to the focusin event which checks whether the focused element is either the overlay itself or a descendent of it - if not it just refocuses on the overlay. Bootstrap向focusin事件註冊一個監聽器，該事件檢查聚焦元素是覆蓋本身還是覆蓋本身的後代 - 如果不是，它只是重疊在覆蓋上。 With the select2 dropdown being attached to the body this effectively prevents you from entering anything into the the textfield. 將select2下拉列表附加到正文後，這有效地阻止您在文本字段中輸入任何內容。

You can quickfix this by overwriting the enforceFocus function which registers the event on the modal 您可以通過覆蓋在模式上註冊事件的enforceFocus函數來快速修復此問題

---

#4樓

change select2.css file 更改select2.css文件

z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;

to 至

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;

---

#5樓

If you use jquery mobile popup you must rewrite _handleDocumentFocusIn function: 如果使用jquery移動彈出窗口，則必須重寫_handleDocumentFocusIn函數：

 $.mobile.popup.prototype._handleDocumentFocusIn = function(e) { if ($(e.target).closest('.select2-dropdown').length) return true; } 

---

#6樓

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

This is my solution with select2 4.0.0. 這是我使用select2 4.0.0的解決方案。 Just override the css right below the select2.css import. 只需覆蓋select2.css導入正下方的css即可。 Please make sure the z-index is greater than your dialog or modal. 請確保z-index大於對話框或模態。 I just add 2000 on the default ones. 我只是在默認值上添加2000。 Cause my dialogs' z-index are about 1000. 因爲我的對話框'z-index大約是1000。