A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

jQuery: Select all options in a Multiple-option Select Box

Alright, here is a quick example of how to use jQuery to select all of the items in a multiple-option select box.

//Javascript part assuming that you have already included jquery.js in your header
$(document).ready(function() {
    $("#select_all_col_managers").click(function() {
        $("#col_manager_list").each(function(){
            $("#col_manager_list option").attr("selected","selected"); });
    }) ;
 
    $("#unselect_all_col_managers").click(function() {
        $("#col_manager_list").each(function(){
            $("#col_manager_list option").removeAttr("selected"); });
    }) ;
 
});

and now for the HTML part…

Filter by Collection Manager:
<select class="select_multiple" id="col_manager_list" multiple="multiple" name="RTCLMG[]">    
    <option>Must Select One</option>    
    <option value="<?php echo $value['col_manager']?>"></option>
</select>
 
    <a href="#" id="select_all_col_managers">Select All</a> <!-- this is the select all part -->
    <a href="#" id="unselect_all_col_managers">Unselect All</a><!-- this is the unselect all part -->

Please note that I am using Code Igniter with this.

UPDATE September 23, 2011:
Raphael posted a comment here that there is a cleaner and better version of doing this.

(function($){
   // Select all
   $('form select option').prop('selected',true);
})(jQuery)
and for disabling all selections:
 
(function($){
   // Select all
   $('form select option').prop('selected',false);
})(jQuery)

He was also kind enough to link us to the jQuery docs. http://api.jquery.com/prop/. Thanks sir!

This entry was posted in General and tagged , , . Bookmark the permalink.

16 Responses to jQuery: Select all options in a Multiple-option Select Box

  1. peter says:

    You can also use jquery selectors to reduce it:

    $(‘#col_manager_list *’).attr(‘selected’,”)

  2. Wenbert says:

    wow. that is short! i will have to try that. thanks for sharing peter ;)

  3. Paulo says:

    Is it possible to select everything in a select multiple when the user click in the submit button?

  4. Wenbert says:

    Hi Paulo,

    I have not tried this code yet, but it should look something like this:

    $(document).ready(function() {
        $("#id_of_submit_button").click(function() {
            $("#col_manager_list").each(function(){
                $("#col_manager_list option").attr("selected","selected"); });
            $("#id_of_form").submit;
        }) ;
    });
    
  5. Steve W says:

    I knew there was a super easy way to do this but couldn’t think of it so I Googled it and found this page.

    $(“#col_manager_list *”).attr(“selected”,”selected”); totally worked, good call on that one.

  6. Florin D says:

    $(‘#col_manager_list>option[selected!=true]‘).attr(‘selected’, ‘selected’);

    This is faster in case you have a list with some options already selected.

  7. Wenbert says:

    @Florin D, thanks for the tip!

  8. Martin says:

    Hi,
    (sorry for my English ;-)
    I have got question: If I want select only one option (value of this option I save to variable for example called “myid”). how?

    thanks

  9. Webdesign says:

    This is great tip! Thanks.

  10. Bill Bartmann says:

    I’m so glad I found this site…Keep up the good work

  11. RyanJ says:

    I have tried the options above and it works fine in Firefox but I’m having some issues in IE. I have two multi-option select boxes, of which I am selecting from one select box to the other. The code looks like this:

    $(“#btnAdd”).click(function(){
    $(“#lbFeeder option:selected”).appendTo(“#lbFeederSelected”);
    $(“#lbFeederSelected *”).removeAttr(“selected”);
    });

    In IE the call to removeAttr(“selected”) only deselects the first option in the list. Any help would be great!!

    Cheers

  12. Wenbert says:

    @RyanJ, I am not sure what is the problem. IE also gives me headaches — most of the time :( I suggest that you also post your question here: http://www.stackoverflow.com ;-) Thanks!

  13. Sedat Kumcu says:

    Thanks for this understood article. good works.

  14. Raj says:

    Thanks a bunch. It is very helpful

  15. Raphael says:

    sorry for reviving this article, but nowadays jquery provides a better – read cleaner – method for checking properties, not only limited to select options but also for checkboxes

    usage is fairly simple:


    (function($){
    // Select all
    $('form select option').prop('selected',true);
    })(jQuery)

    and for disabling all selections:


    (function($){
    // Select all
    $('form select option').prop('selected',false);
    })(jQuery)

    more on this topic may be found here: jQuery API dox

    hth

  16. Wenbert says:

    Thanks Raphael. I have updated the post accordingly.

Leave a Reply to Raj Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>