How to set all options to selected from multiple select boxes

Question

I have a jsp form in which the user is presented with multiple select boxes from which they can choose multiple options:

<td rowspan="4" colspan="1">Team Leaders<br /> <form:select id="teamLeader" multiple="multiple" size="10" path="teamLeader"/> </td> <td rowspan="4" colspan="1">HODs<br /> <form:select id="teamHod" multiple="multiple" size="10" path="teamHod"/> </td> <td rowspan="4" colspan="1">Directors<br /> <form:select id="teamDir" multiple="multiple" size="10" path="teamDir"/> </td> <td rowspan="4" colspan="1">Members<br /> <form:select id="teamPersons" multiple="multiple" size="10" path="teamPersons"/> </td>

When the user clicks save, I want all options from all select boxes to be set to selected. I can achieve this by using a little jQuery method for each select box as follows:

jQuery(document).ready(function () { jQuery('#saveButton').click(function () { jQuery('#teamPersons').each(function () { jQuery('#teamPersons option').attr("selected", "selected"); }); }); });

However the problem is that I have to write a method for each of the 4 select boxes. Is there an easier way to do this i.e. write a single jQuery method to set all options to selected?

ALL the options are selected? Isn't that counter to what the select list is for? Anyway - if you add a class to each select, you can just do $(".myList").each(function(){ //etc }); — csharpnumpty
– csharpnumpty, Commented Feb 4, 2013 at 9:38
@SpaceBison The user is presented with a list of Person objects, from which they choose who are team leaders, HODs, etc. Each Person object chosen goes into the relevant select box. So when Save is clicked , I need to retrieve the person objects from each select box. — Neriyan
– Neriyan, Commented Feb 4, 2013 at 9:53
@Neriyan Ok - I see. Added an answer which I think suits your requirement. — csharpnumpty
– csharpnumpty, Commented Feb 4, 2013 at 10:03

csharpnumpty · Accepted Answer · 2013-02-16 14:46:56Z

The simplest way to select every single item on click, would be as follows:

$("select[multiple] option").prop("selected", "selected");

Example fiddle: http://jsfiddle.net/vYzUS/

In the fiddle, I've omitted the button click and turned the HTML into dummy HTML. I've also (arbitrarily) added the multiple attribute, incase you have any other select lists that you do not want to be selected. It might be more advisable to wrap the ones you do want to select in a div with an id, as it will give the selector a better focus.

I've also used .prop() instead of .attr() - .prop() was introduced in jQuery 1.7 and is specifically for retrieval/setting of property values.

Thank you! This solution works perfectly for my requirements.
This will also select the default option which have no value , any way to avoid that ?

AlecTMH · Accepted Answer · 2013-02-04 14:26:51Z

You don't need to write a function for each select box, just this code:

jQuery(document).ready(function() { jQuery('#saveButton').click(function() { jQuery('select.myClass option').attr("selected","selected"); }); });

HTML with classes

<td rowspan="4" colspan="1">Team Leaders<br /> <form:select id="teamLeader" class="myClass" multiple="multiple" size="10" path="teamLeader"/> </td> <td rowspan="4" colspan="1">HODs<br /> <form:select id="teamHod" class="myClass" multiple="multiple" size="10" path="teamHod"/> </td> <td rowspan="4" colspan="1">Directors<br /> <form:select id="teamDir" class="myClass" multiple="multiple" size="10" path="teamDir"/> </td> <td rowspan="4" colspan="1">Members<br /> <form:select id="teamPersons" class="myClass" multiple="multiple" size="10" path="teamPersons"/> </td>

so only select boxes with class myClass will be switched on click.

oops, I've missed that, thank you for pointing out, I'll update the answer
@AlecTMH This works however I have other select boxes on my form and these also get all their options selected, which is undesirable. Thank you for taking the time to assist.
In this case you can set the same class for all selects which need to be applied. I'll update the answer to show what I mean.

RegarBoy · Accepted Answer · 2015-09-05 13:31:28Z

You can select them all in this way:

$("select option").prop("selected", "selected");

or

$("select option").attr("selected", "selected");

And you can remove all selected options by:

 $("select option").prop("selected", false);

or

$("select option").attr("selected", false);

or

$("select option").attr("selected", "");

marc_s · Accepted Answer · 2016-05-05 19:53:41Z

This will do the trick. As jQuery will implicitly use loops via the selectors. If you want to make it explicit as loop, then use your method (IMO that is not necessary).

You can do like this.

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

This will only select the options in the last list, not all the lists.

Collectives™ on Stack Overflow

How to set all options to selected from multiple select boxes

4 Answers 4

2 Comments

4 Comments

Comments

1 Comment

Hot Network Questions