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

Bootstrap-select didnt show on page load

本文关键字：加载 显示 选择      更新时间：2023-09-26

我正在尝试显示一个简单的引导选择。但它没有出现。

在调试器上查看时，我看到以下行的显示为 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>

知道吗？

这可能为时已晚，答案对原始海报没有用处。 但是如果其他人遇到此问题，我可以通过在我的代码中显式添加.selectpicker('render')来修复它：

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

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

在

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

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

此类位于引导选择.css文件中，您可以包含该文件以设置选择选取器控件的样式。

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

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

好的，所以我发现了一些关于方式，引导选择适用于 React 的方法。当选择选项依赖于某个 React 状态时，您需要调用：

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

更新状态后。

希望这有帮助

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

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

相关文章：