Bootstrap-select didnt show on page load

大城市里の小女人 提交于 2019-12-10 13:16:25

问题


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?


回答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");



回答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.




回答3:


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

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



回答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();


来源:https://stackoverflow.com/questions/34954785/bootstrap-select-didnt-show-on-page-load

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!