Bootstrap-select在modal内部不工作

lzfw57am 于 2024-01-04 发布在 Bootstrap

关注(0)|答案(3)|浏览(148)

我正在为我的网站实现这个selectpicker。我遇到了一个问题，一个具有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>

字符串
请帮助我进入发展的轨道。
谢谢你，谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/41559680/bootstrap-select-not-working-inside-modal

3条答案

按热度按时间

4dbbbstv1#

在加载你的modal后，你必须重新初始化你的Bootstrap-Select（.selectpicker）。这是因为你的modal是一个新创建的元素，你的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的解决方案！

赞(0）回复(0）举报 2024-01-04

gijlo24d2#

您需要在plunker示例中添加以下所需的资源

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/i18n/defaults-en_US.js"></script>

字符串
一切都很好：）
如果实际代码与Plunker不同，请告诉我。
示例：https://plnkr.co/edit/4gJBAu3NKUQp1HMUbrK9?p=preview

赞(0）回复(0）举报 2024-01-04

slhcrj9b3#

你有两个选择;

首先在选择标签中添加此选项;

<select ... data-container="body"> ... </select>

字符串
来源：docs

其次写这段代码覆盖“overflow”属性

.modal-content{
    overflow: unset;
}

型

赞(0）回复(0）举报 2024-01-04

我来回答

Bootstrap-select在modal内部不工作

3条答案

相关问题

热门标签

最新问答