'Bootstrap-Jquery multiselect dropdown is not showing the datalist
I want to populate a multiselect dropdown with the help of bootstrap-multiselect.js package. I am getting the data is shown in the inspect but dropdown is not showing any data in UI. I used these two packages istead of bootstrap-multiselect also but same result:
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-multiselect.css" rel="stylesheet" />
<script src="Scripts/jquery-3.4.1.js"></script>
<script src="Scripts/jquery-3.4.1.min.js"></script>
<script src="Scripts/bootstrap-multiselect.js"></script>
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<style>
.multiselect {
width: 90% !important;
height: 25px !important;
padding-top: 1px !important;
}
ul.multiselect-container.dropdown-menu {
width: 90% !important;
}
</style>
<script>
$(document).ready(function () {
GetDropDown();
});
function GetDropDown() {
var s = '<select id="ddl" style="width:100px;"></select>';
$('#trbody').append(s);
bindDrpDwn();
}
function bindDrpDwn() {
$('#ddl').append($("<option></option>").val(0).html('--Select--'));
for (var j = 0; j < 5; j++) {
$('#ddl').append($('<option></option>').val(j).html('Test_' + j));
}
$('#ddl').attr('multiple', 'multiple');
$('#ddl').multiselect
({
search: true,
});
$('#ddl').multiselect('deselect', '0');
$('#ddl option').each(function () {
$(this).prop('selected', false);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th>DropDown1</th>
</tr>
</thead>
<tbody>
<tr id="trbody">
</tr>
</tbody>
</table>
</div>
</form>
</body>
This is what I am getting when I am inspecting:
But in UI dropdown is not showing any data.
Image-1
Image-2
Please help me with this issue. Thank You in advance.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
