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

This is likely too late for the answer to be useful to the original poster. But in case anybody else has this issue, I was able to fix it by explicitly adding .selectpicker('render') to my code:

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

Answer 2

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.

Answer 3

Use $(".selectpicker").selectpicker("refresh"); after your DOM is loaded.

$(document).ready(function() {
    $(".selectpicker").selectpicker("refresh");
});

Answer 4

This class is in the bootstrap-select.css file which you include to style the selectpicker control.

It looks like your control is not getting automatically picked up by the selectpicker initialization code because you should have the hidden select, followed by a button and a div that contains all the selectpicker data. This can happen the control is added to the page after the initial load. When this happens, you should go ahead an run this javascript to initialize the selectpicker:

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