selectpicker with select all by default

Question

I am using the selectpicker plugin. Now I am trying to select all the options by default, or at least a button to select all without the need of click in the dropdown.

Currently the demo only works if the dropdown is clicked and after that, click the button.

Any idea?

$('.selectpicker').selectpicker();


$(".btn_clk").click(function () {
    $('.selectpicker').selectpicker('selectAll');
});

http://jsfiddle.net/tpnw96ed/

Answer 1

There is default way to add Select All and Deselect All buttons to selectpicker now. You should use option data-actions-box="true" to enable buttons and data-select-all-text="Select all buttton name" data-deselect-all-text="Deselect all button name" to rename them

Answer 2

You can open/close the Selectpicker before/after clicking the button:

$(".btn_clk").click(function () {
    $('.dropdown-menu').css("display","block");
    $('.selectpicker').selectpicker('selectAll');
    $('.dropdown-menu').css("display","none");
});

Edit: You will also need to add the following to manually trigger the dropdown on clicks after a selectAll:

$('.selectpicker').click(function () {
    if($('.dropdown-menu').css("display") == "block") $('.dropdown-menu').css("display","none");
    else $('.dropdown-menu').css("display","block");
});

JSFIDDLE