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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.