bootstrap-select still showing unstyled select

Question

Using the following example

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

results in

<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

When the select element is clicked, nothing seems to happen except for the arrows still being able to be able to select other indexes.

Selecting the bootstrap-select button results in an empty dropdown opening.

See empty dropdown

The app runs on ASP.Net Core with Bootstrap v4.3.1, jQuery v3.5.1 and bootstrap-select 1.13.18.

But trying Bootstrap 5.0.0-beta2 and jQuery 3.6.0 didn't make any difference. Also downgrading bootstrap-select as far as 1.11.1 didn't make a significant difference.

Answer 1

You may not reference the css link. You can refer to the following example.

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