Select2 不适用于模态

Question

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

选项显示 "under" 我的模式，使它们无法选择（见下面的屏幕截图）。我认为 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>

Answer 1

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

dropdownParent: $(".modal-body")

Answer 2

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

.select2 { z-index: 99999999; }

Answer 3

也许您会感兴趣：

Please just add additional style to improve the z-index of select2 container:
.select2-container {
   z-index: 2050;
} 
And next initialise the Select2 in script
$(".select2_demo_2").select2({
   width: '100%'
});

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

此致

Select2 不适用于模态

Select2 not working with modal

css

jquery

ruby-on-rails

select2