Multiple filters with list.js plugin

JavaScript
1

Hello,

I am trying to create multiple filters for a list of products with the plugin list.js http://listjs.com/, i.e. I want to filter a list by both colour and item, at the moment the code below just does the filtering for red items how can I change the jquery code so that if the user chooses both a colour and an item, it filters correctly?

      <form id="filter">
         <select id ="colour" name="colour">
          <option value="0">All packages</option>
        <option value="1">Red</option>
        <option value="2" >Yellow</option>
        <option value="3" >Green</option>
    </select>
    <select id ="items" name="items">
        <option value="0">All items</option>
        <option value="1" >T-shirt</option>
        <option value="2">Trousers</option>
        <option value="3" >Jumper</option>
    </select>
</form>

  <ul >
                            <li >
                                <span class="colour">red</span> <span class="items">t-shirt</span>
                            </li>
                            <li >
                                <span class="colour">yellow</span> <span class="items">trousers</span>
                            </li>
                            <li >
                                <span class="colour">green</span> <span class="items">jumper</span>
                            </li>
                            <li >
                                <span class="colour">red</span> <span class="items">t-shirt</span>
                            </li>
                            <li >
                                <span class="colour">yellow</span> <span class="items">trousers</span>
                            </li>
</ul>

$('#filter-clothes').click(function() {
        featureList.filter(function(item) {
            if (item.values().colour == "Red") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });

Thanks!

2

I found the answer with this code:

$(‘.option-filter’).click(function() {
var packageFilter = $(‘#packages’).val();
var categoryFilter = $(‘categories’).val();

	   featureList.filter(function(item) {
    return item.values().packageid === packageFilter  || item.values().categoryid === categoryFilter;
});

        return false;
    });

but only thing I need now is to show all the products when they click on all for colours and all for items. ie. option value=0 for colours and option value = 0 for items, how can I write that? Thanks!