Question

This question actually applies to filtering using any group of checkboxes. I’m using the jQuery UI MultiSelect Widget to filter products by class name. My code works great when only one box is checked, but returns no results when more than one is selected. I think I need to map an array somehow, but I’m unsure how to do it. The widget documentation says to do this:

var array_of_checked_values = $("select").multiselect("getChecked").map(function(){
   return this.value;   
}).get();

…but that hasn’t helped me. Please help me get this filter working. Thanks!

<div class="main">
    <article class="contemporary"></article>
    <article class="abstract"></article>
    <article class="impressionist"></article>
</div>

<select id="filterGenre" name="filterGenre" multiple="multiple">
    <option value="abstract">Abstract </option>
    <option value="contemporary">Contemporary </option>
    <option value="impressionist">Impressionist </option>
</select>
<button class="submitFilters" type="button">GO</button>


//creates the multiselect widget: 
$("#filterGenre")
   .multiselect({
      noneSelectedText: 'Select Genre',
      selectedText: 'Select Genre',
      minWidth: 120
   });
//a button to submit the form selections: 
$(function() {
        $( "button.submitFilters" ).button({
            icons: {
                primary: "ui-icon-triangle-1-e"
            },
        });
    });

//the filter actions: 
$('button.submitFilters').click(function() {
        var genreVal = $('#filterGenre').val();
    $('.main article').hide();
    $('.main article[class*=' + genreVal + ']').show();
});

Answer 1

I asked this question with a quarter of the words and got the answer immediately (sometimes that helps). The key to solving this is “.join”… gotta join the array to filter the products by classes. I was defining my “genreVal” variable incorrectly… should be done like this:

var genreVal = $("#filterGenre").multiselect("getChecked")
                .map(function(){return "." + this.value; })
                .get()
                .join(); //<--the missing link...

//then i used: 

    $('.main article').hide();
    $('.main article[class*=' + genreVal + ']').show();