jQuery: Select all options in a Multiple Select Listbox

Posted on February 26, 2010 by Craig Lotter

Sometimes it is nice to present a multiple select listbox to a user with everything already selected.

Handy if you’re using listboxes as filter controls, and something that is, as per usual, quite easy to do using the magic that is the jQuery javascript library.

Essentially what the aim of the game here is to set the selected option in each of the multiple select listbox’s <option> entries.  In order to do this, we will once again make use of jQuery’s nifty attr() function and apply this to the result of our clever little jQuery selector call, which will hone in on our desired select listbox using its ID value and then extending that result to only include all option entries.

So the resulting call would look something like this:

$("#multipleselect option").attr("selected","selected");

And there you go. A multiple select listbox with everything already selected for you!

Related Posts :

About Craig Lotter

Craig Lotter is an established web developer and application programmer, with strong creative urges (which keep bursting out at the most inopportune moments) and a seemingly insatiable need to love all things animated. Living in the beautiful coastal town of Gordon's Bay in South Africa, he games, develops, takes in animated fare, trains under the Funakoshi karate style and for the most part, simply enjoys life with his amazing wife and daughter. Oh, and he draws ever now and then too.
This entry was posted in Technology & Code, Tutorials and tagged , , , , . Bookmark the permalink.
  • Nathan

    Thanks. Saved me a bit of time.

  • Jesustrujillo83

    Thanks, your code help me with the web app that I’m building :)

  • John

    I was trying to bind all options of a multi select box to a form object, selected or unselected, but I could only bind the selected options. This worked just fine, great little work around. thanks :-)

  • http://www.craiglotter.co.za Craig Lotter

    Fantastic, glad it worked for you.

  • Mouser

    And to remove all…

    $(“#multipleselect option”).removeAttr(“selected”);