Bootstrap Select2在模型内部不起作用，如何使其工作？

Question

当我在模型外部运行代码时，它可以完美地工作。但是当我把它放在模态中时，我无法搜索项目。

  <div class="modal-body">
            <form class="form-horizontal">
                <div class="panel panel-success">
                    <div class="panel-body">

                        <div class="row">
                            <div class="form-group">
                                <label for="txt_ShapeNote" class="col-sm-3 control-label">Bootstrap Select2 :</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="select2" style="width: 300px; width: 100px">
                                        <option value="1">Cats</option>
                                        <option value="2">Dogs</option>
                                        <option value="3">Fish</option>
                                        <option value="4">Reptiles</option>
                                        <option value="5">Equine</option>
                                        <option value="6">Aviary</option>
                                        <option value="7">Insects</option>
                                    </select>
                                </div>
                            </div>
                        </div>

我正在使用这个脚本和css

 <link href="~/Content/Select2/css/select2.css" rel="stylesheet" />
 <script src="~/Content/Select2/js/select2.js"></script>

在javascript中

 $('#select2').select2();

Answer 1

如果您有一个创建选择框的脚本，则必须在加载模态后运行该脚本。假设这是Bootstrap 3：

$('#modal-body').on('shown.bs.modal', function() {
    $('.form-control').select2();
});

这假设您正在运行Bootstrap 3.您可以在此处查看有关所显示事件的更多信息：Bootstrap modal show event