I am using Bootstrap Multiselect plugin to select values from multi-select dropdown and single select dropdown
I noticed couple of issues and tried several options but none of them worked. If anyone already resolved them, need advice.
HTML
<select class="multiselect">
<option value="cheese"> Cheese </option>
<option value="tomatoes"> Tomatoes </option>
<option value="mozarella"> Mozzarella </option>
<option value="mushrooms"> Mushrooms </option>
<option value="pepperoni"> Pepperoni </option>
<option value="onions"> Onions </option>
Javascript
$(function() {
$('.multiselect').multiselect({
nonSelectedText: 'Check an option!'
});
});
CSS
.multiselect-container input[type=radio] {
display: none;
}
Workaround:
HTML:
<form>
<input type="text" placeholder="Name...">
<select class="multiselect" size="2">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button type="reset">
Reset
</button>
</form>
JS:
$('.multiselect').multiselect({
nonSelectedText: 'Choose an option!'
});
$('[type="reset"]').click(function () {
$('.multiselect-selected-text').attr('title', 'Choose an option!').html('Choose an option!');
$('.multiselect-container li').removeClass('active');
});