javascript - 如何更改select2中下拉列表的父容器

Question

我有表格，其中包含一些选择。对于后者，我使用了插件 select2。

在下面的示例中，您可以看到，选择下拉菜单位于文档的根部 - 在正文中。

我可以更改下拉列表的位置吗？如何更改？

UPD:我的问题可能不太准确。我在问，如何将下拉列表放入带有选择 block 的公共(public)容器中？

$(document).ready(function() {
  $(".js-example-basic-single").select2({
    minimumResultsForSearch: Infinity
  })
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<div class="wrapper">
  <select class="js-example-basic-single" style="width: 200px;">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>

Answer 1

我不知道您使用的 select2 版本是否可用，但您可以使用这个:

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

来源https://select2.github.io/options.html#dropdownParent