javascript - bootstrap multiselect select all does not appear in the list - Stack Overflow

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 = Handlebarspile($("#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.

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.pile($("#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.

• javascript
• html
• css
• twitter-bootstrap-3
• bootstrap-multiselect

Share Improve this question Follow edited Oct 12, 2014 at 21:41 Jared Eitnier 7,1821313 gold badges7272 silver badges125125 bronze badges asked Aug 27, 2014 at 13:54 Vladi IsakovVladi Isakov 28966 silver badges1616 bronze badges 3

• What library are you using? This one perhaps? davidstutz.github.io/bootstrap-multiselect – Jared Eitnier Commented Aug 27, 2014 at 14:34
• yes... this is the library – Vladi Isakov Commented Aug 28, 2014 at 5:33
• Tnx bro... it's working – Vladi Isakov Commented Aug 28, 2014 at 20:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

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

will provide the select-all option.