Bootstrap-select 在模态内不起作用

Question

我正在为我的网站实施这个选择器。我遇到了一个问题，即具有selectpicker它的类的元素没有显示在我的 DOM 上。

这是代码

<div id="modal-container"  class="modal fade hidden-print" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Add New Experience</h4>
    </div>

        <div id="addExperience" class="modal-body">
            <div class="form-horizontal">
                <div class="form-group">
                                <div class="col-md-12">
                                    <select class="user-form selectpicker show-tick form-control" data-live-search="true">
                                        <option>A</option>
                                    </select>
                                </div>
                            </div>
            </div>

        </div>
    </div>
</div>

请帮助我跟踪我的发展。

谢谢！

Answer 1

加载模态后，您必须重新初始化 Bootstrap-Select (.selectpicker)。发生这种情况的原因是，您的模态是一个新创建的元素，而您的 selectpicker 尚未对其进行初始化。

这是我的代码：

// Create
$(document).on('click', '.add', function()
{
    $.ajax({
        type: 'GET',
        url: 'suppliers/create',
        dataType: 'json',
        success: function(data)
        {
            modal.find('.modal-title').html(data.title);
            modal.find('.modal-body').html(data.body);
            $('.selectpicker').selectpicker();
        }
    });
    modal.modal('show');
});

非常感谢Cerlin Boss的解决方案！