Select2 不适用于模态答案

【问题标题】：Select2 not working with modalSelect2 不适用于模态
【发布时间】：2016-07-11 07:41:36
【问题描述】：

我无法让 select2 与我的 wrapbootstrap (Inspinia) 主题配合使用。

这些选项出现在我的模式“下方”，使它们无法选择（见下面的屏幕截图）。我认为 Select2 创建了一堆阻碍的包装器。我该如何解决？当我检查元素时，我看到的是：

<div class="form-group">
  <label>Variant SKU</label>
  <select name="variant_sku_id" id="variant_sku_id" class="variant_sku_id form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    <option value="1">option1</option>
    <option value="2">option2</option>
  </select>
  <span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100px;">
  <span class="selection">
  <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-variant_sku_id-container" aria-owns="select2-variant_sku_id-results" aria-activedescendant="select2-variant_sku_id-result-3g9n-1">
  <span class="select2-selection__rendered" id="select2-variant_sku_id-container" title="option1"</span>
  <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
  </span>
  </span>
  <span class="dropdown-wrapper" aria-hidden="true"></span>
  </span> 
</div>

【问题讨论】：

标签： jquery css ruby-on-rails select2

【解决方案1】：

通过在初始化 select2 时添加此选项来修复：

dropdownParent: $(".modal-body")

【讨论】：

如果您将其用于多种模式，您可以使用dropdownParent: $(".modal-body , .modal-body1")

【解决方案2】：

您可以更改 select2 的 z-index。这也应该有效：

.select2 { z-index: 99999999; }

【讨论】：

【解决方案3】：

也许你会感兴趣：

请添加额外的样式来提高 select2 的 z-index 容器：
.select2-container {
   z-index: 2050;
} 
然后在脚本中初始化 Select2
$(".select2_demo_2").select2({
   width: '100%'
});

发现于http://webapplayers.com/inspinia_admin-v2.4/modal_select2.html

最好的问候

【讨论】：