当我在引导模式中使用select2 (input)时,我不能输入任何东西。就像残疾?在modal之外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在嵌入引导模式时不起作用


当前回答

这对所有人都有效

body .select2-container {
    z-index: 9999 !important;
}

其他回答

你不应该像大多数答案中建议的那样,将下拉框固定在情态动词上。 如果你的select2在模态的底部,你需要向下滚动来找到它,那么你就会有一个下拉的位置问题,因为你把它粘在了模态上。

相反,您应该将下拉父目录设置为输入父目录。在你的例子中,它应该是这样的

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

如果你使用stisla并使用firemodal:

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

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

这是我的工作

对于bootstrap3版本,只需在document ready上使用以下代码:

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

为了更好地理解tabindex元素是如何工作的,完成公认的回答:

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:   -a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;   -0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;   -a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.

来自:Mozilla开发人员网络

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

裁判:https://github.com/select2/select2-bootstrap-theme/issues/41