Select2 下拉菜单低于主下拉菜单

Posted 2023-05-07

【中文标题】Select2 下拉菜单低于主下拉菜单

【英文标题】：Select2 dropdown goes below main dropdown

【发布时间】：2021-10-14 18:36:48

【问题描述】：

我正在使用一个从后端获取数据的 select2 下拉菜单，效果很好。然而，网站的设计是自定义的，我在自定义搜索框之上使用它，如图所示：

Select2 下拉菜单位于我的主搜索框下方。我想在上方输入而不是下方的下拉列表中写入搜索条件。我尝试将 minimumResultsForSearch: -1 属性添加到我的 select2 声明中，但这只会隐藏下面的搜索栏，因此根本无法编写任何条件。这是我的 html：

<div class="row g-0 justify-content-center">
    <form class="col-12 col-sm-11 col-md-10 col-lg-7 main-search">
        <div class="input-group">
            <select class="form-control" id="search-box">
                <option value="0" selected="selected">Search...</option>
            </select>
            <button class="btn btn-primary" type="button">Search</button>
        </div>
    </form>
</div>

【参考方案1】：

这是 select2 的默认设置，要更改它，您可以执行以下操作：

$(".js-example-basic-single").select2(
  placeholder: 'Search your favourite movie'
);

.js-example-basic-single 
  width: 200px;


.select2.select2-container 
  top: -4px;


.select2.select2-container .select2-selection--single 
  height: 50px;
  border-radius: 0;


.select2.select2-container .select2-selection--single:focus 
  outline: none;


.select2.select2-container .select2-selection--single .select2-selection__rendered 
  line-height: 50px;


.select2.select2-container .select2-selection--single .select2-selection__arrow 
  display: none;


.select2-container--default.select2-container--open 
  top: 6px !important;


.select2-container--default .select2-dropdown--below 
  top: -4px;


.select2-container--default .select2-search--dropdown 
  padding: 0;


.select2-container--default .select2-search--dropdown .select2-search__field 
  height: 48px;
  border: 0;
  border-bottom: 1px solid #aaa;
  padding: 10px;
  box-sizing: border-box;

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/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.6-rc.0/js/select2.min.js"></script>
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>