Question

我正在尝试制作一个简单的 Bootstrap-select 。但它没有出现。

查看调试器时，我看到以下行显示为none：

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

对于原始海报有用的答案，这可能为时已晚。但是如果其他人有这个问题，我可以通过明确地将.selectpicker('render')添加到我的代码中来修复它：

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

Answer 2

即使我遇到了类似的问题，但也无法找到这种行为的原因。初始化bootstrap select明确地为我工作。在你的dom准备就绪之后做(".selectpicker").selectpicker()，。

Answer 3

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

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

Answer 4

此类位于bootstrap-select.css文件中，该文件包含在其中，以为selectpicker控件设置样式。

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

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

Answer 5

好的，所以我发现了一些关于方式的信息，bootstrap select可以与React一起使用。当选择选项取决于某些React状态时，您要调用：

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

更新状态后。

希望这会有所帮助

Answer 6

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

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

Bootstrap-select没有在页面加载时显示

6 个答案: