Select2 - tabindexを削除した状態でブートストラップ3で動作しませんか？

Question

Select2は、ブートストラップ3モーダルで正しく動作しない場合、モーダルからtabindex要素を削除しない限り、このバグを起こします。私は私のページ上のいくつかのモーダルでこれを行いましたが、それらはすべて動作しますが、Select2をまったく有効にすることはできません。

テーブルに表示される部門名と位置のリストがあります。各行には、レコードの詳細を表示するためのモーダルを呼び出す独自の「EDIT」ボタンがあります。 modal-bodyは空ですが、ロード時にはAJAX経由で入力されます。

私は、同じページ上の別のSELECT2フィールドを使用しています（ないことモーダル内部が、メインテーブル）が動作するように見えるdoesntのこのモーダルでちょうど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>"; 

、doesntのそのわずかSELECT2は-.-

を表示したいです

Answer 1

また、あなたが含むAJAX前SELECT2を作成しようとしているようにDその後ので、これを試してみてくださいまで、あなたがそれにSELECT2を呼び出すことはできませんので、この権利は、HTMLがAjaxのリターンに含まれている...

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