Bootstrap-select未显示在页面加载中

Question

我正在尝试显示一个简单的Bootstrap选择。但是它没有出现。

在调试器上查看时，我发现以下行中没有显示内容：

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>

任何的想法？

Answer 1

即使我也遇到了类似的问题，但找不到这种行为的原因。初始化引导选择明确地为我工作。在你的 dom 准备好之后(".selectpicker").selectpicker()，就去做吧。

Answer 2

对于原始海报来说，答案可能为时已晚。但是如果其他人遇到此问题，我可以通过显式添加.selectpicker('render')到我的代码中来解决此问题：

$(".selectpicker").selectpicker({
    "title": "Select Options"        
}).selectpicker("render");