我有表单,其中包含一些选择。对于后者,我使用了插件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>
发布于 2017-04-07 18:32:27
我不知道您正在使用的select2版本是否提供,但您可以使用以下命令:
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
发布于 2018-08-03 05:51:46
这将会起作用
$("#selectInput").select2({ dropdownParent: "#modal-container" });
请注意,这将适用于select2版本4.0.2。有关更高的版本,请参阅其他答案。
参考:https://github.com/select2/select2-bootstrap-theme/issues/41
发布于 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>
https://stackoverflow.com/questions/40201680
复制相似问题