Auto-select all <option> items from multiple select dropdown using jQuery

In: Feeling guru|Techie Daw

12 Apr 2011

I’ve been working for the past few days with jQuery and one of the task was to manipulate HTML forms before submitting it for processing. What I needed to do is to process a form having multiple submit buttons and select tags. These set of select tags requires all values to be selected on submit.

Let’s start with creating the markup of the form. Save the HTML below and name it as index.htm (we won’t be needing PHP stuff for now in this exercise.)

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Form</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>

<body>
	<form id="myForm" action="index.html" method="post" onSubmit="return false;">
		<select id="do-not-select" name="do-not-select[]" multiple="multiple" size="3">
			<option>Do</option>
			<option>not</option>
			<option>select</option>
		</select>
		<select id="color" name="color[]" multiple="multiple" size="3">
			<option>Red</option>
			<option>Green</option>
			<option>Blue</option>
		</select>
		<select id="size" name="size[]" multiple="multiple" size="3">
			<option>Small</option>
			<option>Medium</option>
			<option>Large</option>
		</select>
		<select id="category" name="category[]" multiple="multiple" size="3">
			<option>Children</option>
			<option>Ladies</option>
			<option>Men</option>
		</select>
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

The markup above will create a single form with an id of myForm having four (4) multi-select field with the following ids:

  • do-not-select
  • color
  • size
  • category

At line 6, we added the jQuery file (latest version 1.5.2 as of this writing) to use it’s functionality in manipulating DOM objects. Now for the real action, copy the code below and insert it between line 6 and 7:

<script>
$(document).ready(function() {
	$('#myForm').submit(function() {
		$('#color, #size, #category').find('option').each(function() {
			$(this).attr('selected', 'selected');
		});
	});
});
</script>

The script above will do the following task:

  1. Instruct the browser to execute the script within $(document).ready(...); when the page has loaded.
  2. Trigger the script within $('#myForm').submit(...) once the form with an id of myForm is submitted.
  3. With the given SELECT element ids (color, size, category), find all OPTION tags in each of them and add the attribute and value selected="selected"

We also added at line 10 the event handler onSubmit with return false; to prevent the page on submitting while we are testing the script.

That’s it! Load the file on your browser and click Submit button. It should highlight all the options under color, size and category while ignoring the do-not-select option since we didn’t add them in the affected elements. See the full markup below. Remember to remove the onSubmit="return false;" in the FORM tag to enable redirection of your form on submit.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Form</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('#myForm').submit(function() {
		$('#color, #size, #category').find('option').each(function() {
			$(this).attr('selected', 'selected');
		});
	});
});
</script>
</head>

<body>
	<form id="myForm" action="index.html" method="post" onSubmit="return false;">
		<select id="do-not-select" name="do-not-select[]" multiple="multiple" size="3">
			<option>Do</option>
			<option>not</option>
			<option>select</option>
		</select>
		<select id="color" name="color[]" multiple="multiple" size="3">
			<option>Red</option>
			<option>Green</option>
			<option>Blue</option>
		</select>
		<select id="size" name="size[]" multiple="multiple" size="3">
			<option>Small</option>
			<option>Medium</option>
			<option>Large</option>
		</select>
		<select id="category" name="category[]" multiple="multiple" size="3">
			<option>Children</option>
			<option>Ladies</option>
			<option>Men</option>
		</select>
		<input type="submit" value="Submit" />
	</form>
</body>
</html>

About the author

Richard Feraro is a Magento Enterprise Certified developer from Manila, Philippines with 14 years of solid open-source development experience using Linux, Apache, MySQL & PHP.

5 Responses to Auto-select all <option> items from multiple select dropdown using jQuery

Avatar

mon PHILIPPINES

April 15th, 2011 at 2:56 pm

i am in blogging since last year (2010) so i used free acount for my webpage. this time i want to register my own domain name and looking for the best hosting to enthrust my website.

would you recommend a webhosting site for me, or rather may i ask who host your web? thank you for helping!

Avatar

iijb INDIA

January 20th, 2012 at 2:18 pm

Hi,
Thanks. It helps me lot.

Regards
iijb

Avatar

Dinesh INDIA

July 20th, 2012 at 2:38 pm

Hello Richard Feraro,

This post is awsome, i was stucked exactly in same situation how to select all option to be selected before it going to $_POST. And i have tried all option but could not find the solution.

Thanks alot ,you save my day.

Keep Posting…… 🙂

Avatar

Wildati Khoirun nisa'

August 21st, 2013 at 4:38 pm

thx guys,nice one! 🙂

Avatar

Denis UKRAINE

March 25th, 2015 at 5:19 pm

Thanks! Worked and helped

Comment Form

About my blog

This blog is targeted towards all levels of developers and also designers. Various topics are discussed such as Magento, PHP & MySQL, jQuery, WordPress, CSS and HTML.

Booking.com

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 5,243 other subscribers

WordPress + Magento

Recent Trackbacks

Archives

Disclaimer

All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or my mom.