Javascript: Select all options for a select box

Here's a javascript function that will allow the user to select all or none of the options in a multiple select box. It is quite simple to use, first either provide the id of the select box or the actual select box object and it will do the rest.

Selecting all select options

This example will select all options for the select box with the id 'selectbox1':-

<input type="button" name="Button" value="All" onclick="selectAll('selectbox1',true)" />

And this example will select none of the options for the select box by passing the select object and saying we don't want them all selected (false):-

<input type="button" name="Button" value="All" onclick="selectAll(document.getElementById('selectbox2'),false)" />

The function

Just pass the ID of the element or and whether you want all of the options selected or not and it'll do the rest!

function selectAll(selectBox,selectAll) { 
    // have we been passed an ID 
    if (typeof selectBox == "string") { 
        selectBox = document.getElementById(selectBox);
    } 
    // is the select box a multiple select box? 
    if (selectBox.type == "select-multiple") { 
        for (var i = 0; i < selectBox.options.length; i++) { 
             selectBox.options[i].selected = selectAll; 
        } 
    }
    }

Of course, If your select box is not a multiple select, it will do nothing! If this has been of some help to you, let me know!

Download

Download the example JavaScript: Select all options in a select box now!

Comments 8

  1. thank you stewart br41nless

  2. MANY thanks this helped me immediately with a problem I was having! miles

  3. thank you Worrawat Sakulwong

  4. thanks mate, you saved me a lot of researching in javascript :D Synbios

  5. I'm so glad I found this site...Keep up the good work Bill Bartmann

  6. This site rocks! Bill Bartmann

  7. That really helped. Thank you very much mahen

  8. Thanks! That was neat :) Knight Samar
  1. 1

Got something to say?

Join the discussion! You know how these things work; enter your details and comments below and be heard.

  1. Allowed tags: <b><i><br>