Question

如何调整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>

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

Answer 1

您需要首先添加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>

如何使select2-container最高为0？

1 个答案: