Bootstrap-Select 下拉菜单未打开

Question

我正在尝试创建一个带有数据子文本的菜单，我在 stackoverflow 上看到了一些建议，但我无法让菜单正常工作。问题是菜单打不开。

我做错了什么？下面的代码 链接：https://jsfiddle.net/snake93/mfhvs6xp/55/

我差点忘了，当菜单处于活动状态时，是否可以通过 css 移除黑色边框？示例：https://ibb.co/jwWzL7T

$('.strunz').selectpicker();

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>

<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">


<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
  <select class="strunz" data-show-subtext="true" data-size="8">
<option class="optns" data-subtext="Heinz" value="0">Select car:</option>
<option class="optns" data-subtext="Heinz" value="1">Audi</option>
<option class="optns" data-subtext="Heinz" value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
  </select>

Answer 1

$('.strunz').selectpicker();

.optns {
  background: red;
}

.optns:hover {
  background: black !important;
  color: yellow !important;
}

.btn {
  border-radius: 0px !important
}

.dropdown  .bootstrap-select .dropdown-toggle:focus, .dropdown  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
    outline: none !important;
 }
 

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>


<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>

<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">


<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
  <select class="strunz" data-show-subtext="true" data-size="8">
    <option class="optns" data-subtext="Heinz" value="0">Select car:</option>
    <option class="optns" data-subtext="Heinz" value="1">Audi</option>
    <option class="optns" data-subtext="Heinz" value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>

像你一样在 jQuery 下添加 Popper 并为黑色边框添加这个 css

波普尔 jQuery

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

CSS

.dropdown  .bootstrap-select .dropdown-toggle:focus, .dropdown  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
    outline: none !important;
 }

Answer 2

除了您忘记链接popper.js cdn 链接之外，您的代码中的一切都很好。使用它，您的下拉菜单将正常工作。查看预览：

$('.strunz').selectpicker();
 

.optns {
  background: red;
}

.optns:hover {
  background: black !important;
  color: yellow !important;
}

.btn {
  border-radius: 0px !important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<select class="strunz" data-show-subtext="true" data-size="8">
   <option class="optns" data-subtext="Heinz" value="0">Select car:</option>
   <option class="optns" data-subtext="Heinz" value="1">Audi</option>
   <option class="optns" data-subtext="Heinz" value="2">BMW</option>
   <option value="3">Citroen</option>
   <option value="4">Ford</option>
   <option value="5">Honda</option>
   <option value="6">Jaguar</option>
   <option value="7">Land Rover</option>
   <option value="8">Mercedes</option>
   <option value="9">Mini</option>
   <option value="10">Nissan</option>
   <option value="11">Toyota</option>
   <option value="12">Volvo</option>
 </select>