Bootstrap-select didnt show on page load

Question

I'm trying to make a simple Bootstrap-select show up. But it doesn't show up.

When looking on the debugger, I saw that the display is none on the following line:

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

The point is I never added this class to my select. and would love to not see it in the debugger style window. It's the cause I think.

Here is the simple code:

<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>

Any idea?

Answer 1

Even I faced a similar issue but couldn't find the reason for this behavior. Initializing the bootstrap select explicitly worked for me. Just do (".selectpicker").selectpicker(), after your dom is ready.