ブートストラップマルチドロップはPOSTドロップダウンでは機能しませんか？

Question

私はマルチセレクトを初期化するために以下の前提条件を持っています。

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" media="screen"> 
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" /> 
<!-- Bootstrap core and multiselect JS --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script> 
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script> 

それはここに示すように、期待通りに動作して表示されません。

今2番目のドロップダウン「名前は」の値からベースAJAXタイプのドロップダウンリストであるように私が持っているもの最初に '統合を選択'をドロップダウンします。私は複数選択ドロップダウンとして2番目のドロップダウン「名前」を初期化できるようにしたいと思いますが、それはドキュメントがそれを示してどのように動作しません

<script> 
function getState(val) { 
    $.ajax({ 
    type: "POST", 
    url: "get_element.php", 
    data:'src_type_id='+val, 
    success: function(data){ 
     $("#element-list").html(data); 
    } 
    }); 
} 
</script> 

：によって呼び出さ

<tr> 
<td>Select Integration: </td> <td> 
    <select name="new_src_type_id" id="integration-list" class="form-control" onChange="getState(this.value);"> 
      <option value="">Select Integration</option> 
     <?php 
      foreach ($integration_id as $index_integ => $integ_id) { 
       echo "<option value='$integ_id'>".$integration[$index_integ]." </option>"; 
      } 
     ?> 
    </select> 
</td> 
</tr> 
<tr> 
<td>Name: (The changes made will be applied to the ff:)</td> <td> 
    <select name="element[]" id="element-list" class="form-control" multiple="multiple"> 
</select> 
</td> 
</tr> 

。 http://davidstutz.github.io/bootstrap-multiselect/

そして、これは私がこのようにそれを呼び出したときに動作していないよう：時々あなたは、AJAXを使用してロードされた後の要素を初期化することはできません

<script> 
$(document).ready(function() { 
     $('#element-list').multiselect({ 
      includeSelectAllOption: true 
     }); 
    }); 
</script> 

Answer 1

、あなたはそのAJAX後、再び再初期化する必要があります完了しました。

<script> 
    function getState(val) { 
     $.ajax({ 
     type: "POST", 
     url: "get_element.php", 
     data:'src_type_id='+val, 
     success: function(data){ 
      $("#element-list").html(data); 
      $('#element-list').multiselect({ includeSelectAllOption: true }); 
     } 
     }); 
    } 
</script> 

Answer 2

以下のように多項式を初期化する必要があります（必要に応じてajax呼び出しが正しく値を返すと仮定します）。

function getState(val) { 
    $.ajax({ 
    type: "POST", 
    url: "get_element.php", 
    data:'src_type_id='+val, 
    success: function(data){ 
     $("#element-list").append($('<option></option>').val(data).html(data)).multiselect("destroy").multiselect({ 
      includeSelectAllOption: true,   //For SelectAll Option 
      enableFiltering: true,     //For Search Option 
     }); 
    } 
} 

私はあなたがドロップダウンに応じて、複数選択の値を変更しようとしているとして、複数選択の前のインスタンスを破壊する

.multiselect("destroy") 

を書かれています。