时间戳

首页 > 解决方案 > 如何使 select2-container top 0？

jquery - 如何使 select2-container top 0？

问题描述

如何调整 Select2 容器的位置，使搜索框位于原始选择的正上方。

以便：

var select = $('.select');

select.select2({
  width: "100%",
  minimumResultsForSearch: Infinity,
  dropdownParent: $('.selectWrap'),
}).on('select2:open', function() {
  var container = $('.select2-container:last-child').find('.select2-dropdown--below');

  container.css({
    top: -27 + 'px',
    background: '#000'
  })
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<div class="selectWrap">
  <select class="select" name="" id="">
    <option value="1" selected>Choose 1</option>
    <option value="2">Choose 2</option>
  </select>
</div>

我使用了这里的答案，但它对我不起作用。我的错误是什么？

标签： jquerycssjquery-select2

解决方案

您需要先添加 selectWrap 类的默认样式。

.selectWrap {
 position: relative,
 top: 0px, // top position you wanna set
 right: 100px, // right position you wanna set
}

然后添加 parentClass 包装您的选择框：

<div class="selectWrap" style="<code here>">
   <select name="search" type="text" class="form-control select2"></select>
</div>

推荐阅读