Question

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

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

我可以更改下拉列表的位置以及如何执行此操作吗？

UPD：可能我的问题不太准确。我问，如何将下拉列表放在带有select块的通讯容器中？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我不知道您使用的select2版本是否可用，但您可以使用它：

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

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

Answer 2

这可以工作

$("#selectInput").select2({ dropdownParent: "#modal-container" });

请注意，这将适用于select2版本4.0.2。对于更高版本，请参见其他答案。

参考：https://github.com/select2/select2-bootstrap-theme/issues/41

Answer 3

下拉列表的位置由您的HTML和CSS布局决定。这取决于你在示例中放置div的位置以及它的样式。请参阅下面的示例，其中显示下拉列表移动到黄色框的右侧。

＆＃13;

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

＆＃13;

<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 style="width:100%;height:100%;position:relative;">
<div style="height:100px;width:100px;background-color:yellow;float:left;"></div>
<div style="float:left;" class="wrapper">
  <select class="js-example-basic-single" style="width: 200px;">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
</div>

＆＃13;

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

3 个答案: