Bootstrap-select не отображался при загрузке страницы

Я пытаюсь сделать простой Bootstrap-select. Но он не появляется.

При просмотре отладчика я увидел, что в следующей строке нет отображения:

select.bs-select-hidden, select.selectpicker {
    display: none !important;
}

Дело в том, что я никогда не добавлял этот класс в свой выбор. и хотел бы не видеть его в окне стиля отладчика. Это причина, я думаю.

Вот простой код:

<div class="input-group input-group-sm">                    
    <select class="selectpicker" id="event-name-ecom">
              <option value="addToCart" selected>Add To Cart</option>
              <option value="checkout">Checkout</option>
              <option value="removeFromCart">Remove From Cart</option>
              <option value="review" >Review</option>
              <option value="payment" >Payment</option>
              <option value="confirmation" >Confirmation Page</option>
    </select>
    <p class="bg-danger" id="event-required-ecom" style="margin-right: 25px; display: none"></p>
</div>

Есть идеи?


javascript twitter-bootstrap bootstrap-select
person Many man    schedule 22.01.2016    source источник
comment
В коде нет описанной проблемы, jsfiddle.net/yz26mrvu, даже правило important не вызывает никаких проблем. возможно, вы забыли включить bootstrap-select.js или bootstrap-select.css   -  person Shehary    schedule 22.01.2016

Ответы (6)


arrow_upward
5
arrow_downward

Вероятно, уже слишком поздно, чтобы ответ был полезен для оригинального плаката. Но на случай, если у кого-то еще возникнет эта проблема, я смог исправить ее, явно добавив .selectpicker('render') в свой код:

$(".selectpicker").selectpicker({
    "title": "Select Options"        
}).selectpicker("render");
person trubliphone    schedule 07.12.2016

arrow_upward
5
arrow_downward

Даже я столкнулся с подобной проблемой, но не смог найти причину такого поведения. Инициализация выбора начальной загрузки явно работала для меня. Просто выполните (".selectpicker").selectpicker() после того, как дом будет готов.

person jyothsna    schedule 28.07.2016

arrow_upward
2
arrow_downward

Используйте $(".selectpicker").selectpicker("refresh"); после загрузки вашего DOM.

$(document).ready(function() {
    $(".selectpicker").selectpicker("refresh");
});
person Vindhya p    schedule 21.06.2019

arrow_upward
1
arrow_downward

Этот класс находится в файле bootstrap-select.css, который вы включаете для стилизации элемента управления selectpicker.

Похоже, что ваш элемент управления не получает автоматически код инициализации selectpicker, потому что у вас должен быть скрытый выбор, за которым следует кнопка и div, содержащий все данные selectpicker. Это может произойти, когда элемент управления добавляется на страницу после начальной загрузки. Когда это произойдет, вы должны запустить этот javascript, чтобы инициализировать selectpicker:

$('.selectpicker').selectpicker();
person Rachel Martin    schedule 10.07.2019

arrow_upward
0
arrow_downward

Итак, я обнаружил кое-что о том, как выбор начальной загрузки работает с React. Когда параметры выбора зависят от некоторого состояния React, вы хотите вызвать:

$('.selectpicker').selectpicker('refresh');

после обновления состояния.

Надеюсь это поможет

person Van_Paitin    schedule 30.12.2019

arrow_upward
0
arrow_downward

Причина может заключаться в том, что вы отображали html-код динамически (т. е. html был добавлен после загрузки страницы). У меня была эта проблема, когда я использовал ajax для отображения HTML на полностью загруженной странице.

Решение состояло в том, чтобы добавить $('.selectpicker').selectpicker(); в функцию обратного вызова успеха.

person Adnan Mohamed    schedule 04.03.2021