javascript - 选择 select bootstrap 在 bootstrap 模式中显示两次

Question

Bootstrap 选择框在 Bootstrap 模式向导中多次显示。如何解决？图像如下所示:

我从堆栈问题中尝试了很多东西，但没有用。

我的 html/php 部分如下:

<div class="wizard" id="satellite-wizard" data-title="Create Server">
    <div class="wizard-card wizard-card-overlay" data-cardname="location">
        <div class="wizard-input-section">
        <select name="location" data-placeholder="Monitor nodes" style="width:350px;" class="chzn-select">
            <option value=""></option>
            <option>Atlanta</option>
            <option selected>Chicago</option>
            <option>Dallas</option>
        </select>
        </div>
    </div>
</div>

JS代码

    $(document).ready(function() {
        $.fn.wizard.logging = true;
        var wizard = $('#satellite-wizard').wizard({
            keyboard : false,
            contentHeight : 400,
            contentWidth : 700,
            backdrop: 'static'
        });

        $(".chzn-select").chosen();

        wizard.on('closed', function() {
            wizard.reset();
        });

        $('#open-wizard').click(function(e) {
            e.preventDefault();
            wizard.show();
        });
    });

Answer 1

当应用 Bootstrap Select 时，它实际上会创建您选择的副本并隐藏原始选择。如果您看到 2 个选择，那是因为隐藏过程失败。解决这个问题的常用技巧是添加这一行(通常在填充选择的 Ajax 请求的 done 回调中)

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