asked on

jQuery: Select elements only if two classes match

Using jQuery, I want to show results that match two different classes.

<!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> Items should only be displayed if they match both the selected color and the selected number </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 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 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>

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

$('#SelectColor').change(function() {
	if ($(this).val()) {
		var floor = '.'+$(this).val();


		$('.unit').hide();
		$(floor).show();
	}
	else {
		$('.unit').show();
	}
});


$('#SelectNumber').change(function() {
	if ($(this).val()) {
		var floor = '.'+$(this).val();
		$('.unit').hide();
		$(floor).show();
	}
	else {
		$('.unit').show();
	}
});


/*]]>*/
</script>

</body> 
</html>

Open in new window

SOLUTION

cmalakar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Proculopsis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cmalakar

Not sure, why mine was not a Accepted solution, and I hope it looked best to me..

ofcourse, I like comma separated selector of leakim971.

hankknight.. can you explain me ?

Proculopsis

@cmalakar - agreed, I thought the Accepted Solution was unacceptable

hankknight

ASKER

Thank you all for your comments and help with this question. The reason I accepted the solution I did and divided the points the way is because I will be using the solution I accepted. I will be using it because I understand it and it was the easiest for me to integrate into my larger project. All of your response were good and appreciated.

I have asked nearly 3,000 questions on this site since 2002 and I do my best to award points in the fairest way possible. I am not perfect and I can't always make everyone happy but please know that I do appreciate everyone's help and feedback.

cmalakar

>>I understand it and it was the easiest for me to integrate into my larger project

Can I know what was not easy in my solution ? I will definitely help you in understand.
In fact I see, I have only two simple selectors for "p".