常见问题

在Bootstrap模式中使用Select2时,Select2无法正常运行。

发生此问题的原因是Bootstrap模态倾向于从modals之外的其他元素中窃取焦点。由于默认情况下,Select2会将下拉菜单附加到<body>元素,它被认为是“modals之外”。

为避免此问题,您可以使用dropdownParent设置将下拉列表附加到modals本身:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    ...
    <select id="mySelect2">
        ...
    </select>
    ...
</div>

...

<script>
    $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });
</script>

这将导致下拉列表附加到modal,而不是附加到<body> 元素.

或者,您可以简单地全局覆盖Bootstrap的行为:

// 在初始化任何modals之前执行此操作
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

使用捏缩放时,下拉列表将变得未对齐/移位。

参见 #5048。问题在于某些浏览器的pinch-zoom实现会影响Select2默认附加到的body元素,从而导致其无法正确呈现。

解决方法是使用dropdownParent将下拉列表附加到更具体的元素。