bootstrap-select 仍然显示无样式选择

Posted 2023-05-08

【中文标题】bootstrap-select 仍然显示无样式选择

【英文标题】：bootstrap-select still showing unstyled select

【发布时间】：2021-06-09 23:05:21

【问题描述】：

使用下面的例子

<select>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>
<script>
  $('select').selectpicker();
</script>

结果

<div class="dropdown bootstrap-select"><select class="" tabindex="-98">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select><button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="combobox" aria-owns="bs-select-3" aria-haspopup="listbox" aria-expanded="false" title="Mustard"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Mustard</div></div> </div></button><div class="dropdown-menu "><div class="inner show" role="listbox" id="bs-select-3" tabindex="-1"><ul class="dropdown-menu inner show" role="presentation"></ul></div></div></div>

See result

当单击选择元素时，似乎没有任何内容发生，除了箭头仍然能够选择其他索引。

选择引导选择按钮会导致打开一个空的下拉菜单。

See empty dropdown

应用在 ASP.Net Core 上运行，带有 Bootstrap v4.3.1、jQuery v3.5.1 和 bootstrap-select 1.13.18。

但是尝试 Bootstrap 5.0.0-beta2 和 jQuery 3.6.0 并没有什么不同。 将 bootstrap-select 降级到 1.11.1 也没有显着差异。

【参考方案1】：

您不得引用 css 链接。你可以参考下面的例子。

<select>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>
@section Scripts
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

  <script>
    $('select').selectpicker();
  </script>