Select2 在 Bootstrap 模式中选择

Posted 2023-05-07

【中文标题】Select2 在 Bootstrap 模式中选择

【英文标题】：Select2 Select in Bootstrap Modal

【发布时间】：2015-05-01 03:33:30

【问题描述】：

我已经检查了其他线程，涵盖了这个问题，但是这些解决方案都不适合我。

我正在使用 jquery 1.11.2、select2-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(); 该插件在其他地方工作正常。但它在模态中搞砸了：

更新：（不）在这里工作http://jsfiddle.net/Strernd/o0d3vtek/

【参考方案1】：

您遇到的问题是，当 Select2 绑定到选择时，生成的跨度类似于：

<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>

您会注意到硬编码的width: 100px 会强制将文本“拆分”。你可能会想“为什么？！”最肯定的回应是：您使用的是测试版。

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

使用以下 CSS 代码强制 width: 100%：

.select2-container 
    width: 100% !important;
    padding: 0;

看看this working jsfiddle（我在你的标签和另一个div中添加了一些col-xs类）。请注意，只要您的文本有足够的宽度，此解决方案就可以工作。如果宽度小于文本，您将遇到同样的问题，您需要调整 CSS 以添加 overflow: auto; 和 text-overflow: ellipsis;

使用最新的稳定版 3.5.2，它可以作为 this jsfiddle shows 正常工作。

【讨论】：

解决方案 2 似乎不错。使用测试版是愚蠢的。但现在我有这个问题i.imgur.com/wAHIpKD.png

由于您使用的是 Bootstrap，因此您需要两个 CSS 文件。常见的select2.css 和额外的select2-bootstrap.min.css（参见小提琴资源）。要获得更“类似 Bootstrap”的效果，请查看此页面：fk.github.io/select2-bootstrap-css

非常感谢！你节省了我的时间:)

我使用了解决方案 #1，因为我必须使用测试版并且它正在工作。不过，我想知道为什么 100px 样式是硬编码的……谢谢！

我在 select2 4.0.0 版本中遇到了这个问题。仅当<select> 在 Foundation 显示模式中时才会出现此问题；如果它在页面上的其他任何地方 select2 按预期工作。我注意到 width: 100px 出现在呈现的 html 中（当在模态框内时），但 100px 在源代码中不存在。它似乎是动态生成的，并且与模式内部冲突（引导 和 基础？？？）。尽管如此，解决方案 #1 在这种情况下也适用。 =\

【参考方案2】：

span.select2-container 
    z-index:10050;

当您在模式之外有select2 时不起作用。

EDIT

我发现在 Bootstrap Modal 和外部使用 select2 时，这将是一个更好的解决方案。

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

【讨论】：

这应该是公认的答案，如果您使用一种模式而不是另一种模式，那就完美了。仅更改 select2-container z-index 会导致健壮结构上的混乱。

【参考方案3】：

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

    span.select2-container 
    z-index:10050;

【讨论】：

请解释为什么会这样，不要只是“转储代码”

z-index 已经足够解释了

【参考方案4】：

当你想在模态中使用select2时，你可以使用这个link：

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