Bootstrap multiselect select all options at instanciation

Question

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):

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

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

Bootstrap multiple select documentation

Answer 1

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>

Answer 2

if you want to refresh the bootstrap multi select then there it is three line of code that which you can try: $("#YourButtonId").click(function () {
$("#YourMultiSelectId").multiselect("deselectAll", false); $("#YourMultiSelectId").multiselect('updateButtonText'); });

Answer 3

since i have dynamic columns which came from the api or JSON data here is the one working.

            var results = response;
            if (results.length > 0) {
                var columnsIn = results[0];

                for (var key in columnsIn) {
                    var col = new Object();

                    col.data = key;
                    col.title = key;
                    col.value = key;
                    col.label = key;
                    var htm = '';
                    htm += '<option selected>' + col.value + '</option>';

                    $('#dropdownname').append(htm);
                }

                $('#dropdownname').multiselect("rebuild");