bootstrap-select 仍显示无样式 select

Question

使用下面的例子

<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

单击 select 元素时，除了箭头仍然能够 select 其他索引外，似乎没有任何反应。

选择 bootstrap-select 按钮会打开一个空的下拉菜单。

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 并没有产生显着差异。

Answer 1

您不能引用 css link。可以参考下面的例子。

<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>
}

bootstrap-select 仍显示无样式 select

bootstrap-select still showing unstyled select

html

asp.net-core

bootstrap-4

bootstrap-selectpicker