• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 414
  • Last Modified:

jQuery: Count Items Limited by Two Classes

When the selection criteria is changed, I want to alert how many items have been selected.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<style type="text/css"> 

.red {
color: red;
}

.blue {
color: blue;
}

.green {
color: green;
}

</style>

</head> 
<body> 

<h1> When the selection criteria is changed, I want to alert how many items have been selected. </h1>

<h2>Select a Color</h2>
<select name="SelectColor" id="SelectColor">
<option value="">All</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>

<h2>Select a Number</h2>
<select name="SelectNumber" id="SelectNumber">
<option value="">All</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

<p class="unit red one">Red 1</p>
<p class="unit red one">Red One</p>
<p class="unit red two">Red 2</p>
<p class="unit red three">Red 3</p>

<p class="unit blue one">Blue 1</p>
<p class="unit blue two">Blue 2</p>
<p class="unit blue two">Blue Two</p>
<p class="unit blue two">2 Blue</p>
<p class="unit blue three">Blue 3</p>

<p class="unit green one">Green 1</p>
<p class="unit green two">Green 2</p>
<p class="unit green three">Green 3</p>
<p class="unit green three">Green Three</p>

<script type="text/javascript">
/*<![CDATA[*/

$('#SelectColor, #SelectNumber').change(function() {
	var class1 = $('#SelectColor').val();
	var class2 = $('#SelectNumber').val();
	$("p").show();
	if(class1=="" && class2!="") {
		$("p." + class2).show();
		$("p:not('." + class2 + "')").hide();
	}
	else if(class1!="" && class2=="") {
		$("p." + class1).show();
		$("p:not('." + class1 + "')").hide();
	}
	else if(class1!="" && class2!="") {
		$("p." + class1,"p." + class2).show();
		$("p:not('." + class1 + "'),p:not('." + class2 + "')").hide();
	}

	alert('? Items Selected');

});

/*]]>*/
</script>

</body> 
</html>

Open in new window

0
hankknight
Asked:
hankknight
1 Solution
 
leakim971PluritechnicianCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<style type="text/css"> 

.red {
color: red;
}

.blue {
color: blue;
}

.green {
color: green;
}

</style>

</head> 
<body> 

<h1> When the selection criteria is changed, I want to alert how many items have been selected. </h1>

<h2>Select a Color</h2>
<select name="SelectColor" id="SelectColor">
<option value="">All</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>

<h2>Select a Number</h2>
<select name="SelectNumber" id="SelectNumber">
<option value="">All</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

<p class="unit red one">Red 1</p>
<p class="unit red one">Red One</p>
<p class="unit red two">Red 2</p>
<p class="unit red three">Red 3</p>

<p class="unit blue one">Blue 1</p>
<p class="unit blue two">Blue 2</p>
<p class="unit blue two">Blue Two</p>
<p class="unit blue two">2 Blue</p>
<p class="unit blue three">Blue 3</p>

<p class="unit green one">Green 1</p>
<p class="unit green two">Green 2</p>
<p class="unit green three">Green 3</p>
<p class="unit green three">Green Three</p>

<script type="text/javascript">
/*<![CDATA[*/

$('#SelectColor, #SelectNumber').change(function() {
	var class1 = $('#SelectColor').val();
	var class2 = $('#SelectNumber').val();
	$("p").show();
	if(class1=="" && class2!="") {
		$("p." + class2).show();
		$("p:not('." + class2 + "')").hide();
	}
	else if(class1!="" && class2=="") {
		$("p." + class1).show();
		$("p:not('." + class1 + "')").hide();
	}
	else if(class1!="" && class2!="") {
		$("p." + class1,"p." + class2).show();
		$("p:not('." + class1 + "'),p:not('." + class2 + "')").hide();
	}

	alert('? Items Selected : ' + $("p:visible").length );

});

/*]]>*/
</script>

</body> 
</html>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now