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');
});

/

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/

• javascript
• jquery
• select
• twitter-bootstrap-3

• Apparently this has been raised as a bug already: github.com/silviomoreto/bootstrap-select/issues/721 – athms Commented Dec 15, 2014 at 16:04

4 Answers 4

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

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

Try this:

  $('.selectpicker').selectpicker('val', ['Mustard','Relish', 'Ketchup']);

The solution in this thread works for me.

Here is the updated code of the plugin:

Line 888 and 895 in boostrapt-select.js

selectAll: function () {
  this.findLis();
  this.$lis.not('.divider').not('.disabled').not('.selected').not('.hide').find('a').click();
},

deselectAll: function () {
  this.findLis();
  this.$lis.not('.divider').not('.disabled').filter('.selected').not('.hide').find('a').click();
},

Note the change .filter(':visible') is now .not('.hide')