Bootstrap-选择不在模态内工作

时间:2017-01-10 01:14:44

标签: javascript jquery twitter-bootstrap asp.net-mvc-4

我正在为我的网站实施此selectpicker。我遇到了一个问题,即我的DOM上没有显示!rm -rvf ~/data/libs/*类的元素。

这是代码

selectpicker

请帮助我跟踪我的发展。

谢谢!

2 个答案:

答案 0 :(得分:3)

加载模态后,您必须重新初始化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的解决方案!

答案 1 :(得分:1)

您需要在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