Блог

Главная - Вопросы по программированию - Начальная загрузка-Выберите раскрывающийся список не открывается

Начальная загрузка-Выберите раскрывающийся список не открывается

#html #jquery #css #bootstrap-select #bootstrap-selectpicker

Вопрос:

Я пытаюсь создать меню с подтекстом данных, я видел некоторые предложения в 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>

Комментарии:

1. в jsFiddle я увидел ошибку в консоли

2. Э-э, спасибо за совет! Поппер добавил, что теперь все работает нормально. Но вопрос о черной границе остается, у вас есть какие-либо предложения?

3. Добавьте поппер в jQuery 3.6.0. Оригинальное сообщение отредактировано.

4. вот в примере(я отредактировал вопрос) это работает

5. @EmanueleDaniele Да! вы можете сделать это с помощью CSS, проверьте мой ответ ниже

Ответ №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>

Добавьте Popper под jQuery, как вы это сделали, и для черной границы добавьте этот 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;
 }

Комментарии:

1. Позвольте мне сделать фрагмент

Ответ №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>
Метки: