Select2 - не работает в bootstrap 3 с удалением tabindex?

Question

Select2 имеет эту ошибку, где он отказывается работать должным образом в модуле Bootstrap 3, если только не удаляет элемент tabindex из модального. Я сделал это с несколькими модалами на моей странице, и все они работают, однако есть одна, где я не могу заставить Select2 активироваться вообще.

У меня есть список названий и позиций отделов, которые отображаются в таблице, каждая строка имеет свою собственную кнопку «EDIT», которая вызывает модальное отображение данных записи. modal-body пуст, но при загрузке через AJAX.

Я использую другое поле ВЫБ.2 на той же странице (не внутри этого модального, но основная таблица), которая работает хорошо, только Выбор2 в этом модальный не кажется, работает ...

Моя мысль что из-за взаимодействия 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>"; 

код работает нормально, его просто Выбор2, что не хочет, чтобы показать -.-

Answer 1

Опять же, если я знаю d этого права, HTML, содержатся в возвращении АЯКСА, так что вы не можете назвать ВЫБ.2 на нем до тех пор, после этого так попробовать это ...

  <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>