引導多選不在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> 

它似乎沒有被工作如預期所示：

現在我有什麼作爲第二個下拉「名稱」是從的價值基於一個AJAX類型的下拉列表首先下拉選擇集成。

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

被稱爲：

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

我希望能夠初始化第二個下拉「名稱」作爲一個多選下拉列表，但它不喜歡的文檔如何表現它的工作。 http://davidstutz.github.io/bootstrap-multiselect/

而這似乎並不當我這樣稱呼它的工作：

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

，你要改變取決於下拉多選的值摧毀多選的一個實例。