0
146
VistasDropdown multiselect not showing when values set in javascript append
I have a multiselect dropdown that shows options when I hard code them, but as soon as I get my values from the database and append them to the options it does not show. Is there another way to show these values?
Scripts:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
</head>
Select dropdown which shows dropdown values:
<div class="col-sm-4">
<select class="form-control" id="multiselectpuc" multiple="multiple">
@*<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>*@
</select>
</div>
Appending data to the dropdown:
$('#multiselectstudent').multiselect({
buttonWidth: '285px',
allSelectedText: 'All',
includeSelectAllOption: true,
nonSelectedText: 'select puc',
});
$.ajax({
type: "GET",
url: '@Url.Action("GetStudents", "Home")',
datatdataType: 'json',
contentType: 'application/json',
success: function (data) {
data.data.forEach(function (item) {
console.log(item.id)
//$('#multiselectstudent').append("<option value='" + item.id + "'>" + item.code+ "</option>");
$("#multiselectstudent option[value='" + item.id + "']").prop("selected", true);
});
});
item.data has values in console, I can also see the values set in the elements tab, but the dropdown does not show. Please see image:
1 Respuestas
Responde la pregunta0
UI wrappers over a <select> will generally not update themselves when you change the underlying select and will need additional code.
In the case of bootstrap-multiselect, after changing the underlying select you need to call
$("#selectid").multiselect("rebuild");
https://davidstutz.github.io/bootstrap-multiselect/#getting-started
Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).