Jquery MultiSelect Dropdown is not working correctly with data from Ajax call
Question
I am using a multiselect dropdown to have a checkbox and Search functionality. I have added all the required libraries. But the dropdown is not showing correctly. The data is displayed as radio buttons instead of check box. And Selecting any value is not shown. Please find my code below:
<head>
<link rel="stylesheet"
href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script type="text/javascript" src="/resources/js/app.js"></script>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fileList').change(function() {
var end = this.value;
alert("Value:" + end);
$.ajax({
type: "POST",
url: 'getColumns',
data : {
end
},
dataType: 'json',
success: function (response) {
alert('something'+response+"="+response.length);
alert('res'+response[0]);
for(var i = 0; i<response.length; i++){
var id = response[i];
$("#columnList").append("<option value=''>"+id+"</option>");
}
$('#columnList').multiselect({
includeSelectAllOption: true,
buttonWidth: 500,
enableFiltering: true
});
},
error: function() {
alert('fail');
}
});
});
});
</script>
HTML code for Select Element
<div class="row">
<div class="col-sm-12 form-group wow fadeInDown"
data-wow-delay="700ms" data-wow-duration="1000ms">
<div class="input-group">
<span class="input-group-addon"><span
class="glyphicon glyphicon-file"></span></span> <select
class="form-control" name="columnList" id="columnList">
<option value="" hidden>Select Segment Name</option>
</select>
</div>
</div>
</div>
I am Expecting Output like this.
1 answers
solution1
1 ACCPTED 2018-06-05 15:27:23
I hope you have to change your option value code in your jquery. try modifying your code like below:
$("#columnList").append("<option value="+id+">"+value+"</option>");
Also, try to check the class for showing checkbox
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.