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

【问题标题】：Select2 doesn't work when embedded in a bootstrap modalSelect2 在嵌入引导模式时不起作用
【发布时间】：2013-08-31 11:26:33
【问题描述】：

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

答案：

在这里您可以快速找到fix

这是“正确的方法”：Select2 doesn't work when embedded in a bootstrap modal

【问题讨论】：

即从元素中移除属性tabindex="-1"。
dboswell's answer 是正确的解决方案，但是，dropdownParent 不应该在根 div 上，而是更深，例如带有 modal-content 类的 div，否则下拉位置会搞砸滚动模态时。

标签： jquery twitter-bootstrap jquery-select2

【解决方案1】：

如果您使用 stisla 并使用 firemodal ：

$('#modal-create-promo').click(()=>{
    setTimeout(()=>{
        $('#fire-modal-1').removeAttr('tabindex');
    });
});

    $("#modal-create-promo").fireModal({
    ...
});

这对我有用

【讨论】：

【解决方案2】：

从模态中删除tabindex="-1"。我检查了这个解决方案，它有效。

参考：https://github.com/select2/select2-bootstrap-theme/issues/41

【讨论】：

【解决方案3】：

您不应该按照大多数答案中的建议将下拉菜单固定在模式上。如果您的 select2 位于模态框的底部，并且您需要向下滚动才能找到它，那么您将遇到下拉菜单的位置问题，因为您将它卡在了模态框上。

您应该将下拉父级设置为输入父级，而不是这样。在你的情况下，它应该是这样的

$(document).ready(function() {
  $("#vdn_number").select2({
    dropdownParent: $("#vdn_number").parent()
  });
});

【讨论】：

【解决方案4】：

在我的情况下，我这样做了，它有效。我使用 bundle 来加载它，在这种情况下它对我有用

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });

【讨论】：