?
Solved

jQuery: Select elements only if two classes match

Posted on 2011-05-11
7
Medium Priority
?
442 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:hankknight
7 Comments
 
LVL 23

Assisted Solution

by:cmalakar
cmalakar earned 400 total points
ID: 35743416

$(document).ready(
    function() {
       $('#SelectColor').change(function() {
	     callMe();
       });
$('#SelectNumber').change(function(){
callMe();
});

    });

function callMe(){
  $("p").hide();
  $("p[class*='" + $("#SelectColor").val() + " " + $("#SelectNumber").val() + "']").show();
}

Open in new window

0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1400 total points
ID: 35743461
Another one :
<!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, #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();
	}
});

/*]]>*/
</script>

</body> 
</html>

Open in new window

0
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 200 total points
ID: 35744406

This should get the "all/colour" or "all/number" logic:

$('#SelectColor').change( eventChange );
$('#SelectNumber').change( eventChange );

function eventChange() {
  var colour = $('#SelectColor').val();
  var number = $('#SelectNumber').val();

  $("p").each( function() {
    if ( ( $(this).hasClass( colour ) || colour == "" ) && ( $(this).hasClass( number ) || number == "" ) ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
}

Open in new window

0
Technology Partners: 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!

 
LVL 23

Expert Comment

by:cmalakar
ID: 35746644
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 ?

0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 35747764

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

Author Comment

by:hankknight
ID: 35748809
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.
0
 
LVL 23

Expert Comment

by:cmalakar
ID: 35748846
>>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".
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month16 days, 23 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question