I want to filter (show/hide) elements by class. I want to have lets say 5 filters working together.
<select id='filter4'>...</select>
<select id='filter5'>...</select>
<select id='filter6'>...</select>
<select id='filter7'>...</select>
and
<select id='filter6' multiple>...</select>
jquery:
jQuery(document).ready(function ($) {
$("select").on("change", function () {
var filterVal = $("select#filter4").val();
var filterVal2 = $("select#filter5").val();
var filterVal3 = $("select#filter6").val();
var filterVal4 = $("select#filter7").val();
var filterVal5 = $("select#filter8").val();
var filterSelector = "";
var filter2Selector = "";
var filter3Selector = "";
var filter4Selector = "";
var filter5Selector = "";
if (filterVal == "all" && filterVal2 == "all" && filterVal3 == "all" && filterVal4 == "all" && filterVal5 === null) {
//show all items
$(".item").fadeIn("fast");
} else {
if (filterVal != "all") {
filterSelector = "." + filterVal;
}
if (filterVal2 != "all") {
filter2Selector = "." + filterVal2;
}
if (filterVal3 != "all") {
filter3Selector = "." + filterVal3;
}
if (filterVal4 != "all") {
filter4Selector = "." + filterVal4;
}
if (filterVal5 !== null) {
filter5Selector = "." + filterVal5;
}
$(".item").hide();
$(filterSelector + filter2Selector + filter3Selector + filter4Selector + filter5Selector).fadeIn("fast");
}
});
});
See everything in this jsfiddle !
The first four single filters work with any problem. The fifth multi-select element does not work (filter) properly when more than one option is selected.
EDIT: It was needed to replace commas with dots (multiple css selectors) with help of g modifier (/ /g) which is global match:
$(filter4Selector + filter5Selector.replace(/,/g, ".")).fadeIn("fast");
see http://jsfiddle.net/mahish/dum7n/ .
Answer below offers different code which works as well!