[英]Bootstrap Multi-select not working in a POST dropdown?
我具有初始化多重選擇的以下先決條件。
<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>
有時,使用ajax加載后無法初始化元素,需要在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>
您需要像下面這樣初始化您的multiselect(假設您的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")
銷毀多選的先前實例,因為您將根據下拉列表更改多選的值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.