如何在select2中更改下拉列表的父容器
如何在select2中更改下拉列表的父容器
提问于 2016-10-23 18:00:19
我有表单，其中包含一些选择。对于后者，我使用了插件select2。
在下面示例中，您可以看到，select下拉菜单位于文档的根目录中-在正文中。
我可以更改下拉列表的位置吗?如何更改？
UPD:可能我的问题不太准确。我在问，如何将下拉列表放入带有select块的commun容器中？
$(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>
回答 3
Stack Overflow用户
发布于 2017-04-07 18:32:27
我不知道您正在使用的select2版本是否提供，但您可以使用以下命令：
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});Stack Overflow用户
发布于 2018-08-03 05:51:46
这将会起作用
$("#selectInput").select2({ dropdownParent: "#modal-container" });
请注意，这将适用于select2版本4.0.2。有关更高的版本，请参阅其他答案。
参考：https://github.com/select2/select2-bootstrap-theme/issues/41
Stack Overflow用户
发布于 2016-10-23 18:12:29
下拉列表的位置由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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40201680
复制相关文章
相似问题