Selectpicker (bootstrap-select) не работает, показывает отключенное меню? - PullRequest
Новая
       38

Selectpicker (bootstrap-select) не работает, показывает отключенное меню?

0 голосов
/ 08 июля 2019

Я пытаюсь использовать selectpicker из Bootstrap-Select, чтобы сделать выпадающее меню множественным выбором.Вот что у меня есть в моем HTML-файле: 

<select class="selectpicker" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

Но вот что я получаю в своем веб-приложении:

enter image description here

Я не могу попасть в выпадающее меню, оно отключено.Как мне включить это меню?

Ответы [ 3 ]

1 голос
/ 08 июля 2019

1) Вы включили файл JavaScript? Если вы используете CDN или загрузите его, убедитесь, что вы включили jquery, bootstrap и bootstrap-select. После правильной настройки с помощью класса selectpicker для ваших элементов select он автоматически инициализируется bootstrap-select.

2) Если для стиля используется только пользовательский класс, используйте: 

$('.my-custom').selectpicker();
0 голосов
/ 08 июля 2019

Я наконец понял это. Когда вы захватываете файлы Bootstrap.js, jQuery и Popper для своего HTML-файла, они имеют в следующем порядке:

<script src="jquery-3.3.1.slim.min.js"> <script src="popper.min.js"> <script src="bootstrap.min.js">

Или некоторые вещи не будут работать. Как только я изменил это, selectpicker работал нормально.

0 голосов
/ 08 июля 2019

Извините, если на ваш вопрос уже дан ответ, но фрагмент может помочь? 

$(function () {
    $('.selectpicker').selectpicker();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">


<select class="selectpicker" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
...