Currently, I am utilizing the Bootstrap multiselect tool to filter query outcomes on a specific page. After selecting one or multiple options, my goal is to have a "close" or "OK" button visible at the bottom of the selection list. Upon clicking this button, it should close the dropdown and trigger an event. It's essential for the button to always be visible even when scrolling through a long list of items.
I have experimented with different approaches to achieve this functionality, such as appending an LI element at the end of the list. However, none of these methods seem to work effectively.
<select id="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mozarella">Mozzarella</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
$('#multiselect').multiselect({
maxHeight: 160,
buttonClass: 'thisBtn',
onDropdownShow: function(event) {
//nothing
}
});
Feel free to check out this basic Fiddle example: http://jsfiddle.net/kybqvjbp/3/