jQuery: Select all options in a Multiple Select Listbox Programming 26 FEB 2010

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 prop() 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").prop("selected",true);

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

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

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

  • Mouser

    And to remove all…

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

  • thanks, very useful

  • Alê

    Thanx a lot, there is a lot of code out there that doesn’t work….this one works perfectly =)

  • Saiful

    Thanks a lot. Working for me.