4

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;
}
Ravi Hirani
  • 6,511
  • 1
  • 27
  • 42
jagamot
  • 5,348
  • 18
  • 59
  • 96

3 Answers3

1

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

max
  • 8,632
  • 3
  • 21
  • 55
0

I'm not sure where you return your data items from. But wherever you make an ajax call or Json return or just simply write HTML <li> or<option> items into Bootstrap Multiselect, .multiselect('refresh') won't give you what you expect to happen. It just adds new lists again and again right below the your current lists.

For your Q1: You can append new list like "Please Select" as the first list in this dropdownlist. For example:

$("#dropdownID").append("<option value=''>Please Select</option>");

It has to be written before other Real lists that are going to be generated in order to display on the top of your list and treat bootstrap.multiselect to select this one in default. Or if you use JSON or Ajax call, after data call back you can give an object like below:

var firstSelection = {id:'', name:'Please Select'};

And push this object to the top of your lists by using .unshift():

yourJsondata.unshift(firstSelection);

For your Q3: What I do is that I write $('#dropdownID').multiselect('destroy'); at the top of the functions (you may have $("id").change(function(){}); or $("id").click(function(){}); or any function you put your multiselect in). So that every time I initiate this dropdown list, it cleans all of the things were inside previously. But be aware of one thing is that, bootstrap.multiselect manipulates your original select lists(assuming that you are using <select id='dropdownID'><option>...</option><select>) to its own dropdown format(<div><button><span><ul><li>). So every time you initiate new lists, you have to write empty() and destory() together. Example below:

$('#dropdownID').empty(); $('#dropdownID').multiselect('destroy');

Hope this will help you a bit.

QIWEN HU
  • 239
  • 2
  • 8
  • 19
0

Easy way to clear the single-select (using bootstrap multi-select) -- The textHint magically started working when I coded this with normal instantiation:

    $("#ddl_Id").val('');
    $('#ddl_Id').multiselect('refresh');

Also for anyone who doesn't know how to make the multi-select a single select the answer is within the HTML declaration:

<select id="ddl_Id" multiple="multiple" class="col dropdown" size="5">

If you don't include the multiple tag in your HTML it will auto be single select.

Jack
  • 1