javascriptjquerytwitter-bootstrap

Bootstrap multiselect select all options at instanciation

I am using bootstrap multiselect plugin to add dynamically code into an select. Here is my code:

Html:

<label>
    <span>Underlyings</span>
    <select class="multiselect" multiple></select>
</label>

Javascript

var name = ['joe', 'mary', 'rose'];

R.map(function (x) {
    return $('.multiselect', d.el).append("<option>" + x + "</option>");
}, name);

$('.multiselect', d.el).multiselect({
    allSelectedText: 'All',
    maxHeight: 200,
    includeSelectAllOption: true
});

When the multiple select is instancied, it appears as such in the browser (there is some css formatting explaining its aspect):

enter image description here

Whereas I would like it to appear as (with all checkbox selected at instanciation, without to click on 'select all'):

enter image description here

I looked into the doc, but did not find it ...

Bootstrap multiple select documentation

Solution

  • You need to run both selectAll (with false as second parameter - this indicate that all values will be selected, even non-visible values) and updateButtonText (to change the text that appear in the drop-down menu).

    Check this example:

    $(function() {
  var name = ['joe', 'mary', 'rose'];
  $.map(name, function (x) {
    return $('.multiselect').append("<option>" + x + "</option>");
  });
  
  $('.multiselect')
    .multiselect({
      allSelectedText: 'All',
      maxHeight: 200,
      includeSelectAllOption: true
    })
    .multiselect('selectAll', false)
    .multiselect('updateButtonText');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<label>
    <span>Underlyings</span>
    <select class="multiselect" multiple="multiple"></select>
</label>