jQuery Select2 在嵌入引导模式时不起作用

Select2 doesn't work when embedded in a bootstrap modal

提问by breq

When I use a select2 (input) in bootstrap modal, I can't type anything into it. It's like disabled? Outside the modal select2 works fine.

当我在引导模式中使用 select2（输入）时，我无法在其中输入任何内容。好像是残疾人？在模态 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 在嵌入引导模式时不起作用

回答by breq

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

回答by dboswell

For Select2 v4:

对于 Select2 v4：

Use dropdownParentto attach the dropdown to the modal dialog, rather than the HTML body.

使用dropdownParent该下拉列表连接到模态对话框，而不是HTML体。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

This will attach the Select2 dropdown so it falls within the DOM of the modal rather than to the HTML body (the default). See https://select2.org/dropdown#dropdown-placement

这将附加 Select2 下拉列表，使其位于模态的 DOM 内，而不是 HTML 正文（默认）。见https://select2.org/dropdown#dropdown-placement

回答by pymarco

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:

对于引导程序 3，解决方案是：

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

Bootstrap 4 renamed the enforceFocusmethod 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. With the select2 dropdown being attached to the body this effectively prevents you from entering anything into the the textfield.

You can quickfix this by overwriting the enforceFocus function which registers the event on the modal

Bootstrap 为 focusin 事件注册一个监听器，该事件检查焦点元素是覆盖层本身还是它的后代——如果不是，它只是重新聚焦在覆盖层上。将 select2 下拉列表附加到正文，这有效地防止您在文本字段中输入任何内容。

您可以通过覆盖在模态上注册事件的enforceFocus 函数来快速解决此问题

回答by MrBii

Just remove tabindex="-1"and add style overflow:hidden

只需删除tabindex="-1"并添加样式overflow:hidden

Here is an example:

下面是一个例子：

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

回答by Diluka W

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

This is my solution with select2 4.0.0. Just override the css right below the select2.css import. Please make sure the z-index is greater than your dialog or modal. I just add 2000 on the default ones. Cause my dialogs' z-index are about 1000.

这是我使用 select2 4.0.0 的解决方案。只需覆盖 select2.css 导入正下方的 css。请确保 z-index 大于您的对话框或模态。我只是在默认值上加了 2000。因为我的对话框的 z-index 大约为 1000。

回答by bezz

Set the dropdownParent. I had to set it on .modal-content within the modal or the text would end up centered.

设置 dropdownParent。我必须将它设置在模态中的 .modal-content 上，否则文本最终会居中。

$("#product_id").select2({
    dropdownParent: $('#myModal .modal-content')
});

回答by Ashraf Slamang

Answer that worked for me found here: https://github.com/select2/select2-bootstrap-theme/issues/41

在这里找到对我有用的答案：https: //github.com/select2/select2-bootstrap-theme/issues/41

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

Also doesn't require removing the tabindex.

也不需要删除tabindex.

回答by Anas

According to the official select2 documentation this issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal.

根据官方的 select2 文档，出现此问题是因为 Bootstrap 模态倾向于从模态之外的其他元素中窃取焦点。

By default Select2 attaches the dropdown menu to the element and it is considered "outside of the modal".

默认情况下 Select2 将下拉菜单附加到元素，它被认为是“在模态之外”。

Instead attach the dropdown to the modal itself with the dropdownParent setting:

而是使用 dropdownParent 设置将下拉列表附加到模态本身：

$('#myModal').select2({
   dropdownParent: $('#myModal')
});

See reference: https://select2.org/troubleshooting/common-problems

请参阅参考：https: //select2.org/troubleshooting/common-problems

回答by hhk

I had the same issue, updating z-indexfor .select2-containershould do the trick. Make sure your modal's z-indexis lower than select2's.

我有同样的问题，更新z-index了.select2-container应该做的伎俩。确保您的模态z-index低于 select2。

.select2-container {
    z-index: 99999;
}

Updated: In case above code doesn't work properly, also remove tabindexes from your modal as @breq suggested

更新：如果上面的代码不能正常工作，也可以按照@breq 的建议从你的模态中删除 tabindexes

回答by S.Mohamed Mahdi Ahmadian zadeh

Jus use this code on Document.read()

只在 Document.read() 上使用此代码

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