<!-- Appreciation and more thanks to Bootstrap cool snippets, the webpage -->
<!--Inspo by: https://bbbootstrap.com/snippets/multiselect-dropdown-list-83601849 -->
<section>
<h2>Bootstrap Multiselect Dropdown</h2>
<!--- Multiselect Dropdown Bootstrap-->
<div class="row d-flex justify-content-center mt-100">
<div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select up to 3 tags" multiple>
<option value="Author" onclick="filterSelection('Author')">Author</option>
<option value="MSelect">Multiselect Dropdown</option>
<option value="Accordions" >Accordions</option>
<option value="Radio Buttons">Radio Buttons</option>
<option value="SearchBox">Search Boxes</option>
<option value="Tables">Tables</option>
<option value="Profiles">Profiles</option>
<option value="Sliders">Sliders</option>
<option value="Tabs">Tabs</option>
<option value="NavMenu">Navigation Menu</option>
<option value="Cities">Cities</option>
<option value="Countries">Countries</option>
<option value="Regions">Regions</option>
</select>
</div>
</div>
<br><br>
</section>
/* Check out later: https://bbbootstrap.com/snippets/accordion-hover-effect-26103860 */
.mt-100 {
margin-top: 50px;
}
body {
background: grey;
color: #514B64;
min-height: 100vh
}
h2 {
color: darkgreen;
}
#css-dropdown
{
position: absolute;
top: 0;
right: 0;
left: 0;
width: 300px;
height: 42px;
margin: 100px auto 0 auto;
}
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
removeItemButton: true,
maxItemCount:3,
searchResultLimit:5,
renderChoiceLimit:5
});
});