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

How to change parent container of dropdown list in select2

本文关键字：select2 下拉列表 何改变 改变      更新时间：2023-09-26

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

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

我可以改变下拉列表的位置和如何做到这一点?

可能我的问题不太准确。我问，如何把下拉列表在公共容器与选择块?

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

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

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});
源https://select2.github.io/options.html dropdownParent

可以了

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

请注意，这将在select2版本4.0.2上工作。有关更高版本，请参阅其他答案。

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

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

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

相关文章：