CODEWITHSUNDEEP
javascriptjqueryhtml
skos
skos

Reputation: 4212

How can I select all options of multi-select select box on click?

This is my HTML

<select name="countries" id="countries" MULTIPLE size="8">
   <option value="UK">UK</option>
   <option value="US">US</option>
   <option value="Canada">Canada</option>
   <option value="France">France</option>
   <option value="India">India</option>
   <option value="China">China</option>
</select>
<br />
<input type="button" id="select_all" name="select_all" value="Select All">

When user click on 'Select All' button, I want all the options in the select box to be selected

$('#select_all').click( function() {
    // ?
});

Upvotes: 85

Views: 200935

Answers (10)

kamal
kamal

Reputation: 1193

This one also can be another solution:

$('#countries').multiselect('selectAll', false)

Upvotes: 0

M&#225;ty&#225;s Grőger
M&#225;ty&#225;s Grőger

Reputation: 1682

if you also want to deselect all options once select all option is deselected you can try this: (Select All option's value should be 'all')

var selectAllIsSelected = false;
$('#select').on('change', function(event) {
    var vals = $(this).val()
    if (selectAllIsSelected == false && vals.indexOf("all")>-1 == true) {
        $('.service_continent > option').prop('selected', true);
        selectAllIsSelected = true;
        $('.service_continent').trigger('change');
    }
    if(selectAllIsSelected == true && vals.indexOf("all")>-1 == false)
    {
        $('.service_continent > option').prop('selected', false);
        selectAllIsSelected  = false;
        $('.service_continent').trigger('change');
    }
});

Upvotes: 0

Sivasakthi Chandrasekaran
Sivasakthi Chandrasekaran

Reputation: 25

I'm able to make it in a native way @ jsfiddle. Hope it will help.

Post improved answer when it work, and help others.

$(function () { 

    $(".example").multiselect({
                checkAllText : 'Select All',
            uncheckAllText : 'Deselect All',
            selectedText: function(numChecked, numTotal, checkedItems){
              return numChecked + ' of ' + numTotal + ' checked';
            },
            minWidth: 325
    });
    $(".example").multiselect("checkAll");    

});

http://jsfiddle.net/shivasakthi18/25uvnyra/

Upvotes: 0

Alauddin Ansari
Alauddin Ansari

Reputation: 250

If you are using JQuery 1.9+ then above answers will not work in Firefox.

So here is a code for latest jquery which will work in all browsers.

See live demo

Here is the code

var select_ids = [];
$(document).ready(function(e) {
    $('select#myselect option').each(function(index, element) {
        select_ids.push($(this).val());
    })
});

function selectAll()
{
    $('select#myselect').val(select_ids);
}

function deSelectAll()
{
    $('select#myselect').val('');
}

Hope this will help you... :)

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

Try this:

$('#select_all').click(function() {
    $('#countries option').prop('selected', true);
});

And here's a live demo.

Upvotes: 203

mathi
mathi

Reputation: 1147

try this,

call a method selectAll() onclick and write a function of code as follows

function selectAll(){
    $("#id").find("option").each(function(this) {
    $(this).attr('selected', 'selected');
    });
}

Upvotes: 4

Starx
Starx

Reputation: 78971

Give selected attribute to all options like this

$('#countries option').attr('selected', 'selected');

Usage:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

Update

In case you are using 1.6+, better option would be to use .prop() instead of .attr()

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

Upvotes: 4

Alp
Alp

Reputation: 29739

Working Demo

$('#select_all').click( function() {
    $('select#countries > option').prop('selected', 'selected');
});

If you use jQuery older than 1.6:

$('#select_all').click( function() {
    $('select#countries > option').attr('selected', 'selected');
});

Upvotes: 1

The Angry Saxon
The Angry Saxon

Reputation: 792

try

$('#select_all').click( function() {
    $('#countries option').each(function(){
        $(this).attr('selected', 'selected');
    });
});

this will give you more scope in the future to write things like 

$('#select_all').click( function() {
    $('#countries option').each(function(){
        if($(this).attr('something') != 'omit parameter')
        {
            $(this).attr('selected', 'selected');
        }
    });
});

Basically allows for you to do a select all EU members or something if required later down the line

Upvotes: 0

gdoron
gdoron

Reputation: 150253

For jQuery versions 1.6+ then 

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

Or for older versions:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

LIVE DEMO

Upvotes: 22

Related Questions