Select2 Select 在 Bootstrap 模态

Question

我已经检查了其他线程，解决了这个问题，但是 none 这个解决方案对我有用。

我正在使用 jquery 1.11.2，选择 2-4.0.0-beta.3 和 bootstrap-3.3.1

我的模式如下所示：

<div class="modal fade" id="addProductModal">
    <div class="modal-dialog">
        <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">Add Product</h4>
            </div>
            <div class="modal-body">

            {!! BootForm::openHorizontal(2,10)->action('/recipes/'.$recipe->id.'/product')->post() !!}

              {!! BootForm::select('Produkte: ','product_list[]' , $products)->id('products') !!}
              {!! BootForm::submit('Erstellen') !!}

              {!! BootForm::token() !!}
            {!! BootForm::close() !!}

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我想打电话给$('#products').select2(); 该插件在其他地方工作正常。但它在模态中搞砸了：

更新：（不）工作 fiddle 此处 http://jsfiddle.net/Strernd/o0d3vtek/

Answer 1

您遇到的问题是，当 Select2 绑定到 select 时，生成的范围类似于：

<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;">
    <span class="selection">
        <span class="select2-selection select2-selection--single" tabindex="0" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="select2-products-results" aria-labelledby="select2-products-container">
            <span class="select2-selection__rendered" id="select2-products-container">Mein Produkt</span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

您会注意到强制文本为 "splitted" 的硬编码 width: 100px。您可能会想 "why the hell?!"，而答案肯定是：您使用的是测试版。

您可以通过以下方式解决此问题：

使用以下 CSS 代码强制 width: 100%：
```
.select2-container {
    width: 100% !important;
    padding: 0;
}
```
看看 this working jsfiddle（我在你的标签中添加了一些 col-xs 类和另一个 div）。请注意，只要您的文本有足够的宽度，此解决方案就可以使用。如果宽度小于文本，您将遇到同样的问题，您需要调整 CSS 以添加 overflow: auto; 和 text-overflow: ellipsis;
使用最新稳定版3.5.2，正常工作如this jsfiddle shows.

Answer 2

我所做的是在页面正上方添加这段代码

    span.select2-container {
    z-index:10050;
}

Answer 3

span.select2-container {
    z-index:10050;
}

当 select2 超出模态时，

不起作用。

EDIT

我发现在 Bootstrap 模式内外使用 select2 时，这是一个更好的解决方案。

.select2-container--open{
        z-index:9999999         
    }

Answer 4

当您想在模式中使用 select2 时，您可以使用此 link：

$('#my-select').select2({
    dropdownParent: $('#my-modal')
});

Select2 Select 在 Bootstrap 模态

Select2 Select in Bootstrap Modal

modal-dialog

jquery-select2

twitter-bootstrap-3