全选的jQuery选择器

Question

I have a page that for simplicity contains this:

<div id="parent">
    <div class="commonClass" data-attribute-one="some value" data-attribute-two="some value">
    .... (lots more rows)
</div>

At the top of the page I have two inputs for the user to search/filter results:

1. An html select to filter data-attribute-one to a single selection.
2. An input box to filter data-attribute-two contains name.

The next challenge is that I wanted to combine the two searches / filters, eg find all rows with an data-attribute-one value of "A" AND all rows with a data-attribute-two containing (*=) 'AAAA'. I satisfied that with the following:

$(".commonClass[data-attribute-one='" + searchValue1 +"']"[data-attribute-two*='" + searchValue2 +"']")

What I'm having a hard time with is how to handle the case where the user nulls out a search field or selects "all" from the drop down (to filter data-attribute-one)? Is there any way to change my existing selector to better handle an empty ('') searchValue1 and/or searchValue2? Or, is the solution to dynamically construct the selector along the lines of, eg

selector = ".commonClass"
if ( searchValue1 != '' ) {
   selector += "[data-attribute-one='" + searchValue1 +"']"
} ... etc

Answer 1

As per the comments from Joe Enos and Jaw.sh, I wrote a method to construct the selector:

function constructSearchSelector() {
    var selector = ".commonClasss";
    if ( searchValue1 != '' ) {
        selector += "[data-attribute-one='" + searchValue1 + "']";
    }
    if ( searchValue2 != '' ) {
        selector += "[data-attribute-two*='" + searchValue2 + "']";
    }
    return selector;
}

This way I can easily add on more search criteria and I can easily debug the constructed value. Thanks for the comments!