当我在引导模式中使用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在嵌入引导模式时不起作用


当前回答

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

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

也不需要删除tabindex。

其他回答

基于@pymarco的答案,我写了这个解决方案,它不是完美的,但解决了select2焦点问题,并保持制表符序列在模态内工作

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) {
                this.$element.trigger('focus')
            }
        }, this))
    }

设置dropdownParent。我必须在modal中设置。modal-content,否则文本会居中。

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

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

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

也不需要删除tabindex。

在我的情况下,我有两个情态动词同样的问题,所有都解决了使用:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

正如在项目问题#41中,一个用户说。

如果你的iPad键盘在点击select2输入时隐藏了引导模式,你可以通过在select2输入初始化后添加以下规则来解决这个问题:

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
   var styleEl = document.createElement('style'), styleSheet;
   document.head.appendChild(styleEl);
   styleSheet = styleEl.sheet;
   styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
   document.body.scrollTop = 0; // Only for Safari
}

摘自https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

编辑:如果你的选项没有正确显示,你需要在初始化select2时使用dropdownParent属性:

$(".select2").select2({
    dropdownParent: $("#YOURMODALID")
});

祝你好运