CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
senK
senK

Reputation: 2802

Bootstrap selector for multiselect- select all option

So what i need is an select all option in multiple bootstrap selector as an option so i just create a select as 

<select class="form-control selectpicker" multiple>
   <option value="all">All</option>
   <option value="1">Dog</option>
   <option value="2">Cat</option>
   <option value="3">Tiger</option>
</select>

And when i click All it will remove all other options except all, and if i click any other than All then it need to remove all options

What i tried is like 

$(".selectpicker").change(function(event){
    if ($( this ).find("option:first").is(':selected')) {
        $( this ).find("option").prop('selected', false);
        $( this ).find("option:first").prop('selected', true);
    } else {
        $( this ).find("option:first").prop('selected', false);
    }
});

But once All clicked then always all is activated and nothing can be clicked, i even tried to get value on onclick event but due to bootstrap selectpicker i can able to get it?

Any tricks to made this possible? i can do this with static variable for one selecpicker but can't able accomplish with multiple selectpicker in a form.

Upvotes: 1

Views: 13152

Answers (2)

Vũ Trọng Quang
Vũ Trọng Quang

Reputation: 37

I think you can do something like

$("#multiple-select option").prop("selected", "selected");
$('#multiple-select').selectpicker('refresh');

Must use prop.

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

New edit

Here is a working DEMO 

$('.selectpicker').selectpicker();
var all = $('option[value=all]');
$('.selectpicker').change(function() {
var all = $('option[value=all]'); 
var thisVal = all.html();
if (all.is(':selected')) {
    $('.selectpicker').selectpicker('deselectAll');    
    $('ul.dropdown-menu > li[rel=0]').addClass('selected');
    $('span.filter-option').html(thisVal);
} else {
    $('ul.dropdown-menu > li[rel=0]').removeClass('selected');
}
});

Upvotes: 2

Related Questions