bootstrap multiselect select all does not appear in the list

Question

I am trying to add the select all option in bootstrap multiselect list I created.

HTML:

<select id="taskNameSelect" class="multiselect" multiple="multiple">
    <option value="multiselect-all">Select all</option>
    {{#each taskName}}
    <option value="{{this}}">{{@key}}</option>
    {{/each}}
</select>

JS:

Cellomat.Views.TaskStatusView = Backbone.View.extend({
    className: 'row-fluid',
    events: {
        'click .level': 'select_log_level'
    },
    initialize: function() {
        this.template = Handlebars.compile($("#taskStatus-template").html());
    },
    render: function() {
        $(this.el).html(this.template({
            taskName: Cellomat.Models.ActionRequests
        }));
        $(".multiselect", this.el).multiselect({
            selectAllText: 'Select all',
            selectAllValue: 'multiselect-all'
        });
        return this;
    },
    select_log_level: function(event) {
        $('.level').removeClass('active');
        $(event.target).addClass('active');
        var ze_level = $(event.target).data('level');

        this.model.set({
            level_name: ze_level
        });
    }
});

The output I get is just dropdown list with all the content apart from the select all. I need the select all.

Answer 1

You need to include includeSelectAllOption when instantiating your multiselect. So:

$(".multiselect", this.el).multiselect({
    includeSelectAllOption: true
});

will provide the select-all option.