引导选择未在页面加载时显示答案

【问题标题】：Bootstrap-select didnt show on page load引导选择未在页面加载时显示
【发布时间】：2016-04-29 12:43:31
【问题描述】：

我正在尝试显示一个简单的 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>

有什么想法吗？

【问题讨论】：

代码中没有描述的问题，jsfiddle.net/yz26mrvu，甚至important 规则也没有引起任何问题。可能是您忘记包含bootstrap-select.js 或bootstrap-select.css

标签： javascript twitter-bootstrap bootstrap-select

【解决方案1】：

对于原始发布者来说，答案可能为时已晚。但是如果其他人有这个问题，我可以通过在我的代码中显式添加 .selectpicker('render') 来解决它：

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

【讨论】：

【解决方案2】：

即使我遇到了类似的问题，但找不到这种行为的原因。显式初始化引导选择对我有用。只需 (".selectpicker").selectpicker()，在你的 dom 准备好之后。

【讨论】：

【解决方案3】：

在加载 DOM 后使用 $(".selectpicker").selectpicker("refresh");。

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

【讨论】：

【解决方案4】：

该类位于 bootstrap-select.css 文件中，您可以通过该文件来设置 selectpicker 控件的样式。

看起来你的控件没有被 selectpicker 初始化代码自动拾取，因为你应该有隐藏的选择，然后是一个按钮和一个包含所有 selectpicker 数据的 div。这可能会在初始加载后将控件添加到页面中。发生这种情况时，您应该继续运行此 javascript 来初始化 selectpicker：

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

【讨论】：

【解决方案5】：

好的，所以我发现了一些关于引导选择与 React 一起工作的方式。 When the select options depend on some React state, you want to call:

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

更新状态后。

希望对你有帮助

【讨论】：

【解决方案6】：

原因可能是您动态呈现了 html 代码（即 html 是在页面加载后添加的）。当我使用 ajax 将一些 html 呈现到完全加载的页面时，我遇到了这个问题。

解决方法是在成功回调函数中添加$('.selectpicker').selectpicker();。

【讨论】：