引导多选不在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") 

，你要改变取决于下拉多选的值摧毁多选的一个实例。