My Silly Point of View
it's my blog anyway
Auto-select all <option> items from multiple select dropdown using jQuery
12 Apr 2011I’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:
- Instruct the browser to execute the script within
$(document).ready(...);when the page has loaded. - Trigger the script within
$('#myForm').submit(...)once the form with an id of myForm is submitted. - With the given
SELECTelement ids (color, size, category), find allOPTIONtags in each of them and add the attribute and valueselected="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>
Comment Form
About my blog
This is a programmer's blog. Whenever I encounter a difficult coding task, I make sure that I'll be able to share it here in the hope that others may find it useful. It's my way of giving back to the open source community who have been a great help to me as well.
or bookmark to your mobile
Mage Enabler Discussion
- kevinfilteau on "Mage Enabler customer session data not showing in wp"
- jamesckemp on "Can mage-enabler make single sign on between magento & wordpress?"
- Stefan Boonstra on "[Plugin: Mage Enabler] Workaround for inability to edit Magento Products and Attribute Sets"
- John LeBlanc on "[Plugin: Mage Enabler] Workaround for inability to edit Magento Products and Attribute Sets"
- microkid on "Mage Enabler customer session data not showing in wp"
- davepyro on "[Plugin: Mage Enabler] single product in post"
- davepyro on "Mage Enabler customer session data not showing in wp"
- hardik.upadhyay on "[Plugin: Mage Enabler] Mage.php address"
- websitedesignby on "[Plugin: Mage Enabler] Same database?"
- websitedesignby on "[Plugin: Mage Enabler] Same database?"
Proudly Pinoy!
Recent Comments
Vikas reply as of February 20, 2012: Hello Richard, Can you please help... (read 89 replies)
Mohammad Adeel reply as of February 11, 2012: Thank you Richard and... (read 266 replies)
Joepet Cuento reply as of February 11, 2012: Hi Richard! How are you... (read 38 replies)
Chris reply as of January 30, 2012: I’m using CE 1.6.0 Thanks in... (read 266 replies)
Richard Feraro reply as of January 26, 2012: Your code is correct. What... (read 89 replies)
Viewers by Country
 |
India | 3401 (21 %) | 3934 (20 %) |
 |
United States | 2700 (17 %) | 3507 (18 %) |
 |
United Kingdom | 929 (6 %) | 1182 (6 %) |
 |
Germany | 808 (5 %) | 1011 (5 %) |
 |
Netherlands | 571 (4 %) | 710 (4 %) |
 |
France | 516 (3 %) | 655 (3 %) |
 |
Philippines | 442 (3 %) | 669 (3 %) |
 |
Brazil | 427 (3 %) | 502 (3 %) |
 |
Italy | 343 (2 %) | 438 (2 %) |
 |
Spain | 334 (2 %) | 446 (2 %) |
 |
Canada | 324 (2 %) | 404 (2 %) |
 |
Australia | 321 (2 %) | 378 (2 %) |
 |
Vietnam | 289 (2 %) | 369 (2 %) |
 |
Pakistan | 279 (2 %) | 305 (2 %) |
 |
China | 256 (2 %) | 345 (2 %) |
 |
Romania | 241 (2 %) | 292 (1 %) |
 |
Ukraine | 234 (1 %) | 298 (2 %) |
 |
Indonesia | 140 (1 %) | 167 (1 %) |
 |
Poland | 131 (1 %) | 161 (1 %) |
 |
Singapore | 126 (1 %) | 171 (1 %) |
| Total Countries: | 139 |
|---|---|
| Total Visits: | 15858 |
| Total Pageviews: | 19789 |
2 Responses to Auto-select all <option> items from multiple select dropdown using jQuery
mon
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!
iijb
January 20th, 2012 at 2:18 pm
Hi,
Thanks. It helps me lot.
Regards
iijb