Question

I’m trying to concatenate a class selector using multiple variables that come from user input. I’m getting an empty array as an answer.

The user input is captured from dropdown menus and saved as variables:

var changed1 = $("#dropdown1-ddl option:selected").text();
var changed2 = $("#dropdown2-ddl option:selected").text();

There is a list of results that are shown based on whether the list item has that particular class.

$("ul li").hide();    
$("ul li ."+changed1+"."+changed2).parent().show();

The list is setup so that it pulls all the information off of a database and stores the search terms in classes in div tags below each li tag. Hence the showing of the parent.

<ul>
<li>
    <div class="value1"></div>
    <div class="value2"></div>
</li>
<li>
    <div class="value1"></div>
    <div class="value2"></div>
</li> 
</ul>

The JQuery should search across the div’s for all of the div’s that match the search terms and show them.

Currently I can pull the user input and save it as variables. I can search on one variable just fine but adding the second keeps giving an empty array (at least that is the result if I just a console.log to output the result of the concatenation.

Answer 1

Your selector currently says that some child element of an li in a ul must have both classes of whatever changed1 and changed2 are equal to.

But since each div only has one class, you can try the following approach:

$("ul li").has('.' + changed1).filter(':has(.' + changed2 +')').show();

This filters out first li’s that have a div inside them with class of the value of changed1, and filters that list (of li’s) further for ones that also have a div with a class of the value of changed2, then shows those li’s that match both.

I’m not sure it’s the most efficient way, but it does work.

Simple jsFiddle I used to test: http://jsfiddle.net/DCqwH/