Bootstrap Multiselect - Using the plugin for single select, first item is always selected

jagamot picture jagamot · Feb 22, 2016 · Viewed 8.1k times · Source

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.

  1. When using the plugin for single select my first item is always selected
  2. Unable to change the nonSelectedText text for single dropdown.

JsFiddle

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;
}

Answer

max picture max · Feb 22, 2016

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');
});

JSFIDDLE