C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

In this post jQuery attribute selector Example, we shall see the various type selectors available in jQuery, and how to use them to filter out elements with specific attributes and values.

Running the Sample

To run the example code at your desk, create a new Asp.net page; copy the entire code below, change reference of the jQuery & Stylesheet files to point to your local directory.
Build and run the application.

Click on the btnAttributeSelector button to view the selector Outputs.

<html xmlns="http://www.w3.org/1999/xhtml">

<title>jQuery Selector</title>

<script

type="text/javascript"

src="JavaScript/jquery-1.7.2.js"></script>

<script

type="text/javascript"

src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>

<link

type="text/css"

href="Stylesheet.css"

rel="Stylesheet" />

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

$('#btnAttributeSelector').click(function(event) {

event.preventDefault();

// Attribute - ID Selector

$("#txtName").each(function() {

alert('ID Selector:' + $(this).attr('id') + ' => ' + $(this).val());

});

// Attribute - Class Selector

$(".FocusText").each(function() {

alert('Class Selector:' + $(this).attr('id'));

});

// Attribute - Attribute Exists Selector

$("[border]").each(function() {

alert('Attribute Exists Selector:' + $(this).attr('id'));

});

// Attribute - Attribute Value In Selector

$("[border='0']").each(function() {

alert('Attribute Value In Selector:' + $(this).attr('id'));

});

// Attribute - Attribute with Type (text) Selector

$("input[type=text][class]").each(function() {

alert('Attribute with Type Selector:' + $(this).attr('id'));

});

// Attribute - Attribute with Type(text) and Value IN Selector

$("input[type=text][class='RedText']").each(function() {

alert('Attribute with Type(text) and Value IN Selector:' + $(this).attr('id'));

});

// Attribute - Attribute with Type(text) and Value Not IN Selector

$("input[type=text][class!='RedText']").each(function() {

alert('Attribute with Type(text) and Value Not IN Selector:' + $(this).attr('id'));

});

// Attribute - Attribute with Type(dropdown) and Value IN Selector

$("select[class='RedText']").each(function() {

alert('Attribute with Type(dropdown) and Value IN Selector:' + $(this).attr('id'));

});

// Attribute - Attribute with Type(dropdown) and Value Not IN Selector

$("select[class!='RedText']").each(function() {

alert('Attribute with Type(dropdown) and Value Not IN Selector:' + $(this).attr('id'));

});

// Attribute - Attribute with checkbox type Selector

$("input[type=checkbox][checked]").each(function() {

alert('Attribute with checkbox type Selector:' + $(this).attr('id'));

});

</script>

</head>

<body>

<table>

<tr>

<td>

<asp:TextBox

ID="txtName"

CssClass="RedText"

runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:TextBox

ID="txtAge"

Enabled="false"

CssClass="FocusText"

runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>Password</td>

<td>

<asp:TextBox

ID="txtPassword"

CssClass="FocusText"

TextMode="Password"

runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>Address</td>

<td>

<asp:TextBox

ID="txtAddress"

CssClass="FocusText"

TextMode="MultiLine"

runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>Gender</td>

<td>

<asp:CheckboxList

ID="drpGender"

CssClass="RedText"

runat="server">

<asp:ListItem Value="" Text="-Select-"></asp:ListItem>

<asp:ListItem Value="M" Text="Male"></asp:ListItem>

<asp:ListItem Value="F" Text="Female"></asp:ListItem>

</asp:CheckboxList>

</td>

</tr>

<tr>

<td>Country</td>

<td>

<asp:CheckboxList

ID="drpCountry"

runat="server">

<asp:ListItem Value="" Text="-Select-"></asp:ListItem>

<asp:ListItem Value="U" Text="USA"></asp:ListItem>

<asp:ListItem Value="K" Text="UK"></asp:ListItem>

<asp:ListItem Value="I" Text="India"></asp:ListItem>

</asp:CheckboxList>

</td>

</tr>

<tr>

<td>Status</td>

<td>

<asp:RadioButtonList

ID="radListStatus"

CssClass="RedText"

RepeatDirection="Horizontal"

runat="server">

<asp:ListItem Value="A" Text="Active"></asp:ListItem>

<asp:ListItem Value="I" Text="InActive"></asp:ListItem>

</asp:RadioButtonList>

</td>

</tr>

<tr>

<td>Skill sets</td>

<td>

<asp:CheckBoxList

ID="chkListSkills"

CssClass="RedText"

RepeatDirection="Horizontal"

runat="server">

<asp:ListItem Value="A" Text="Asp.Net"></asp:ListItem>

<asp:ListItem Value="C" Text="C#"></asp:ListItem>

<asp:ListItem Value="S" Text="SQL Server"></asp:ListItem>

<asp:ListItem Value="O" Text="Oracle"></asp:ListItem>

<asp:ListItem Value="M" Text="My SQL"></asp:ListItem>

</asp:CheckBoxList>

</td>

</tr>

<tr>

<td>

<img

src="images\Users.JPG"

id="imgUsersIcon"

border="0"

class="FocusText" />

</td>

</tr>

<tr>

<td>Profile Link</td>

<td>

<asp:HyperLink

id="lnkProfile"

runat="server"

NavigateUrl="#"

Text="View Profile"></asp:HyperLink>

</td>

</tr>

<tr>

<td>Hidden Text</td>

<td>

</td>

</tr>

<tr>

<td>Submit</td>

<asp:Button

ID="cmdSubmitButton"

Text="Save"

runat="server"></asp:Button>

</td>

</tr>

<tr>

<td>Reset</td>

</td>

</tr>

<tr>

<td>Button</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<asp:Button

ID="btnTypeSelector"

Text="Type Selector"

runat="server"></asp:Button>

</td>

</tr>

<tr>

<asp:Button

ID="btnIDSelector"

Text="ID Selector"

runat="server"></asp:Button>

</td>

</tr>

<tr>

<asp:Button

ID="btnAttributeSelector"

Text="Attribute Selector"

runat="server"></asp:Button>

</td>

</tr>

<tr>

<asp:Button

ID="btnClassSelector"

Text="Class Selector"

runat="server"></asp:Button>

</td>

</tr>

<tr>

<asp:Button

ID="btnStateSelector"

Text="State Selector"

runat="server"></asp:Button>

</td>

</tr>

<tr>

<asp:Button

ID="btnHierarchySelector"

Text="Hierarchy Selector"

runat="server"></asp:Button>

</td>

</tr>

</table>

</form>

</body>

</html>

Stylesheet.css

.RedText

{

color:Red;

border: 1px solid black;

font-family:Verdana;

font-size:9pt;

}

.FocusText

{

border: 1px solid blue;

background-color: #FEDCBA;

font-family:Verdana;

font-size:9pt;

}

.waterMark

{ background-color:#fedcba;

font-family:Verdana;

font-size:10pt;

}

.Label

{

color:Maroon;

font-family:Verdana;

font-size:10pt;

}

The jQuery attribute with dropdown type is used to filter out all dropdown elements in a page, and have the specified attribute and the specified value for the attribute, the syntax for this selector is.

$("select[<attribute name> = <attribute value>]")

In this post we shall see on how to use the jQuery attribute with dropdown type selector to select all dropdown elements in a page which have the class attribute, and have a value of RedText for the class attribute.

The following script lists out all the dropdown elements in the page which have the attribute “class” which have the value “RedText”

$("select[class='RedText']").each(function() {

alert('Attribute with dropdown type Selector:' +$(this).attr('id'));

});

The following script lists out all the dropdown elements in a page which have the class attribute and with have the value RedText for the class, on click of the btnAttributeSelector button.

$('#btnAttributeSelector).click(function(event) {

event.preventDefault();
//

// Attribute - Attribute with Type(dropdown) and Value IN Selector

$("select[class='RedText']").each(function() {

alert('Attribute with dropdown type Selector:' +$(this).attr('id'));

});
});

C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Monday, October 1, 2012

jQuery attribute selector Example

jQuery attribute with checkbox type selector

jQuery attribute with dropdown type selector

Blog Archive

About Me