jQuery Archives - My Silly Point of View https://mysillypointofview.com it's my blog anyway Sat, 16 Apr 2011 03:31:49 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.13 13951596 Auto-select all <option> items from multiple select dropdown using jQuery https://mysillypointofview.com/2011/04/12/auto-select-all-option-items-from-multiple-select-dropdown-using-jquery/ https://mysillypointofview.com/2011/04/12/auto-select-all-option-items-from-multiple-select-dropdown-using-jquery/#comments Tue, 12 Apr 2011 00:00:00 +0000 http://mysillypointofview.richardferaro.com/2011/04/12/auto-select-all-option-items-from-multiple-select-dropdown-using-jquery/ 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. […]

The post Auto-select all <option> items from multiple select dropdown using jQuery appeared first on My Silly Point of View.

]]> 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>

The post Auto-select all <option> items from multiple select dropdown using jQuery appeared first on My Silly Point of View.

]]> https://mysillypointofview.com/2011/04/12/auto-select-all-option-items-from-multiple-select-dropdown-using-jquery/feed/ 5 717