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

Question

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() {
    // ?
});

I suggest you read [this](http://stackoverflow.com/a/5876747/601179) + T.J. Croweder comment — gdoron is supporting Monica, Mar 29 '12 at 14:03

Darin Dimitrov · Accepted Answer · 2013-12-28T21:51:21.873

191

Try this:

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

And here's a live demo.

edited Dec 28 '13 at 21:51

answered Mar 29 '12 at 11:45

Darin Dimitrov

994,864
265
3,241
2,902

1

Thanks +1. Why is the second selected required in `prop('selected', 'selected')`? – Kevin Meredith Jul 09 '13 at 16:20
2

@KevinMeredith, it is not required, it is a misuse of the API. This answer demonstrates the problematic nature of stackoverflow, the questioner has no idea what is the best answer but picks one anyway. That answer pops to the top and all the next visitors upvote it without knowing it is wrong. It's incredibly amazing that you knew it is wrong but none the less upvoted it as well. (Sorry Darin it is really really not personally against you.) – gdoron is supporting Monica Dec 28 '13 at 20:46
1

@gdoron, you are right. The `prop` method should be used with a boolean value for attributes such as `selected` and `checked`. I have updated my answer. – Darin Dimitrov Dec 28 '13 at 21:40
@gdoron - I up-voted it since the attached jsfiddle worked. Good criticism of me (thank you)- in the future I'll be more careful with up-votes. Also +Darin, could you please use this updated jsfiddle - http://jsfiddle.net/3nUPF/177/? – Kevin Meredith Dec 28 '13 at 21:50
@KevinMeredith, sure, I have updated my answer to use the correct jsfiddle. – Darin Dimitrov Dec 28 '13 at 21:51
1

@gdoron Yes, you're right regarding the nature of the *readers*, however we should pay more attention to the nature of the *editors*. From what I see, the problem comes from the [wrong edit of Darin's answer](http://stackoverflow.com/revisions/9924691/2), which was accepted and ignored. I personally faced the same problem when my correct answer was edited wrong, but due to many other notifications I was unable to see it and roll it back. – VisioN Dec 29 '13 at 09:10
Thanks for clearing that out VisioN. It appears that my original answer was using the `.attr` method for which it is fine to set the value to `'selected'`. – Darin Dimitrov Dec 29 '13 at 09:20

score 19 · Answer 2 · answered Mar 29 '12 at 11:45

19

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

answered Mar 29 '12 at 11:45

gdoron is supporting Monica

142,542
55
282
355

`selected="true"` is not valid xhtml, maybe it would be better to use `selected="selected"` – Alp Mar 29 '12 at 11:50
2

@Alp. Read the spec: _"selected [CI] When set, this boolean attribute specifies that this option is pre-selected."_ **boolean!**. And see this example from the docs: `$("input").prop("checked", true);` – gdoron is supporting Monica Mar 29 '12 at 11:54
I was right, XHTML Strict allows only selected="selected". Check it for yourself @ http://validator.w3.org/check. `value of attribute "selected" cannot be "true"; must be one of "selected"` – Alp Mar 29 '12 at 12:25
@Alp. Check the DOM in my DEMO after selecting all. Do you see there `selected="true"`? me neither... :). – gdoron is supporting Monica Mar 29 '12 at 13:14
@Alp. I suggest you read [this](http://stackoverflow.com/a/5876747/601179) + T.J. Croweder comment – gdoron is supporting Monica Mar 29 '12 at 14:03

score 4 · Answer 3 · answered Mar 15 '13 at 12:13

4

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

answered Mar 15 '13 at 12:13

mathi

1,109
12
19

score 4 · Answer 4 · edited Jun 20 '20 at 09:12

4

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 29 '12 at 11:46

Starx

75,098
44
181
258

@ShreeKhanal. Note that for jQuery 1.6+ You should use `.prop` and not `attr` for those kind of things. – gdoron is supporting Monica Mar 29 '12 at 11:57
@gdoron, but your answer tells that, anyways I will update it – Starx Mar 29 '12 at 11:59

Alauddin Ansari · Answer 5 · 2014-03-05T12:30:53.473

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... :)

score 1 · Answer 6 · answered Mar 29 '12 at 11:48

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

score 0 · Answer 7 · edited Dec 17 '15 at 09:22

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/

score 0 · Answer 8 · answered Jan 28 '22 at 08:38

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

score 0 · Answer 9 · answered Mar 29 '12 at 11:46

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

@Starx. Why `$('#countries')` ...? – gdoron is supporting Monica Mar 29 '12 at 11:49 — gdoron is supporting Monica, Mar 29 '12 at 11:49

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

9 Answers9

Update

Linked

Related