javascript - Select2 - 在删除 tabindex 的 bootstrap 3 中不起作用？

Question

Select2 存在此错误，除非从模式中删除 tabindex 元素，否则它无法在 Bootstrap 3 模式中正常工作。我已经在我的页面上使用了多个模式，它们都可以工作，但是，有一个模式我根本无法激活 Select2。

我有一个显示在表格中的部门名称和职位列表，每一行都有自己的“编辑”按钮，用于调用模式来显示记录详细信息。 modal-body 为空，但在加载时通​​过 AJAX 填充。

我在同一页面上使用另一个 select2 字段(不在该模式内，而是在主表中)，该字段运行良好，只是此模式中的 select2 似乎不起作用...

我的想法是，由于 AJAX 交互，我可能必须刷新 select2 或在填充模态之前/之后加载它，但到目前为止都没有产生任何结果。

请问有什么建议吗？

PHP

<!-- Modal EditDepartmentModal -->
<div class="modal fade" id="EditDepartmentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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">Edit Department Record</h4>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" id="SaveDepartmentButton" name="SaveDepartmentButton" class="btn btn-primary">Save Changes</button>
        <button type="button" id="DeleteDepartmentButton" name="DeleteDepartmentButton" class="btn btn-danger">Delete Record</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /.Modal EditDepartmentModal -->

AJAX:

<!-- JavaScript for Modal -->
<script type="text/javascript">
//Initialize Select2 Elements
$(function () {
    $(".select2").select2();
}); 

// VIEW DEPARTMENT RECORD                   
$('#EditDepartmentModal').on('show.bs.modal', function(e) {
    var modal = $(this);
    var dataDeptName = $(e.relatedTarget).data('dname');

    $.ajax({
        type: "POST",
        url: "../../plugins/MySQL/ajax_action.php",
        data: { action:"view_department",Department_Name:dataDeptName}, // form data to post goes here as a json object
        //dataType: "html",
        //async: true,
        cache: false,
        success: function (data) {
            console.log(data);
            modal.find('.modal-body').html(data);
        },
        error: function(err) {
            console.log(err);
        },
    });

});
</script>

AJAX返回:

echo "
    <!-- ID No. -->
    <label>ID No.:</label>
    <div class=\"input-group\">
        <span class=\"input-group-addon\"><i class=\"fa fa-database\"></i></span>
        <input type=\"number\" class=\"form-control\" id=\"dataDeptID\" name=\"dataDeptID\" size=\"5\" value=\"$dept_id\" disabled />
    </div>
    <!-- /.id number -->                                        

    <p> </p>

    <!-- Department -->
    <label>Department Name:</label>
    <div class=\"input-group\">
        <span class=\"input-group-addon\"><i class=\"fa fa-bars\"></i></span>
        <input type=\"text\" class=\"form-control\" id=\"dataDeptName\" name=\"dataDeptName\" value=\"$dept_name\" />
    </div>
    <!-- /.department -->

    <p> </p>

    <!-- Positions -->
    <label>Department Positions:</label>
    <div class=\"input-group\">
        <span class=\"input-group-addon\"><i class=\"fa fa-briefcase\"></i></span>
        <select class=\"form-control select2\" style=\"width:100%;\" id=\"test\" name=\"test\">
            <option value=\"1\">Option 1</option>
            <option value=\"2\">Option 2</option>
            <option value=\"3\">Option 3</option>
            <option value=\"4\">Option 4</option>
        </select>
    </div>";

代码工作正常，只是 select2 不想显示 -.-

Answer 1

再说一遍，如果我没看错的话，html 包含在 ajax 返回中，因此在此之前您无法对其调用 select2，所以请尝试这个...

            <script type="text/javascript">
            //Initialize Select2 Elements
            $(function () {



            // VIEW DEPARTMENT RECORD
            $('#EditDepartmentModal').on('show.bs.modal', function(e) {
                var modal = $(this);
                var dataDeptName = $(e.relatedTarget).data('dname');

                $.ajax({
                    type: "POST",
                    url: "../../plugins/MySQL/ajax_action.php",
                    data: { action:"view_department",Department_Name:dataDeptName}, // form data to post goes here as a json object
                    //dataType: "html",
                    //async: true,
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        modal.find('.modal-body').html(data);
                        $(".select2").select2();
                    },
                    error: function(err) {
                        console.log(err);
                    },
                });

            });
      });
                </script>