嵌入在引导模式中时，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。