Java Articles

Advertisement

jQuery Multiple Selectors Example

by Ram Satish

Share

In this article, we will see how to find multiple elements and then apply the style on the fetched elements. In order to select one element we pass the css selector to $(). For example, ${“h2”) selects all the h2 elements used. If want to get a set of elements matching one or more selectors, we will call $(“selector1, selector2, …”).
Let’s get started with the example.

Select Elements Using Multiple Selectors

In our example, we will use a simple form containing couple of input fields and a select field. When any of the form fields gain focus, the selected field gets highlighted, background color changes to blue. When the field loses focus, background color changes back to white.

In order for the background color to change, we will have top add some action on elements with these different html tags. In our case, input and select types.

The action will be in form jQuery and will fire once the DOM is ready. Let’s register the document-ready event handler and add the jQuery action that applies/removes the style as the field gets focus and when it loses focus.

Advertisement

multipleSelectors.js:

$(document).ready(
function() {
$("input, select" ).focus(function () {
$(this).removeClass("noSelection");
$(this).addClass("selection");
});
$("input, select").blur(function () {
$(this).removeClass("selection");
$(this).addClass("noSelection");
});
});

Above jQuery first selects the html elements based on tag names. We pass more than one tag name comma separated.

$("input, select" )

Next we add a focus and a blur event on the returned jQuery objects.
The focus event is executed when the HTML field gets the focus and the blur event handler is triggered when it loses the focus.

Here is the document that contains the form fields.

multipleSelectors.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Selectors Example</title>
<script src="jquery.js"></script>
<script src="multipleSelectors.js"></script>
<link rel="stylesheet" href="multipleSelectors.css" type="text/css" />
</head>
<body>

<div class="form-element multi-field name" id="name-form-element">
<fieldset>
<legend><strong>Name</strong></legend>
<label id="firstname-label" class="firstname">
<strong>First name</strong>
<input type="text" value="" name="FirstName" id="FirstName" spellcheck="false">
</label>
<label id="lastname-label" class="lastname">
<strong>Last name</strong>
<input type="text" value="" name="LastName" id="LastName" spellcheck="false">
</label>
</fieldset>
</div>

<div class="form-element" id="gender-form-element">
<label id="gender-label">
<strong id="GenderLabel">Gender</strong>
<div id="GenderHolder" >
<select id="Gender" name="Gender">
<option value="">I am...</option>
<option value="FEMALE" >
Female</option>
<option value="MALE" >
Male</option>
<option value="OTHER" >
Other</option>
</select>
</div>
</label>
</div>

</body>
</html>

Here is our style sheet, we will apply selection class to change the background color to light blue color and apply noSelection to change it back to white as the field loses focus.

multipleSelectors.css:

.selection {
background: #87CEFA;
}

.noSelection {
background: white;
}

fieldset, legend {
margin: 0;
padding: 0;
border: 0;
}

The page when it is viewed in a browser:

Focus on Input Text
Multiple Selectors – Focus on Input Text

The input field gets highlighted when field has the focus.

Let’s now navigate to the select field. The input field will lose focus so the background color will be reset back to white whereas the select field’s background color becomes blue.

Focus on Select field
Focus on Select field

Download the source code

This was an example about jQuery selecting multiple elements.

You can download the source code here: multipleSelectors.zip

Share

Advertisement

Related

Advertisement

Latest

Advertisement