过滤器分类并显示结果

Question

Here我已经做了一个过滤类别与复选框。但我希望它与选择框。我可以如何转换它？

如果我用选择框做，它会非常方便。所以你能指导我做这个吗？

<div class="tags"> 

    <fieldset class="filter-grp"> 
    <label><input type="checkbox" rel="skirt" name="year" /> skirt </label><br> 
    <label><input type="checkbox" rel="trousers" name="year" /> trousers </label><br> 
    <label><input type="checkbox" rel="shirt" name="year" /> shirt </label><br> 
    </fieldset> 

    <br> 
    <fieldset class="filter-grp"> 
    <label><input type="checkbox" rel="blue" name="type" /> blue</label><br> 
    <label><input type="checkbox" rel="pink" name="type" /> pink</label><br> 
    <label><input type="checkbox" rel="green" name="type" /> green</label><br> 
    </fieldset> 
    <br> 


</div> 

Answer 1

HTML

<div class="tags"> 
    <fieldset class="filter-grp"> 
     <select name="year"> 
      <option value="skirt">Skirt</option> 
      <option value="trousers">Trousers</option> 
      <option value="shirt">Shirt</option> 
     </select> 
    </fieldset> 
    <br /> 
    <fieldset class="filter-grp"> 
     <select name="color"> 
      <option value="blue">Blue</option> 
      <option value="pink">Pink</option> 
      <option value="green">Green</option> 
     </select> 
    </fieldset> 
    <br /> 
</div> 
<ul class="results"> 
    <li class="blue skirt">blue skirt</li> 
    <li class="pink shirt">pink shirt</li> 
    <li class="pink skirt">pink skirt</li> 
    <li class="blue shirt">blue shirt</li> 
    <li class="blue trousers">blue trousers</li> 
    <li class="green skirt">green skirt</li> 
    <li class="blue shirt">blue shirt</li> 
    <li class="pink trousers">pink trousers</li> 
    <li class="blue trousers">blue trousers</li> 
    <li class="blue skirt">blue skirt</li> 
    <li class="green shirt">green shirt</li> 
</ul> 

的JavaScript

$(function() { 
    $('div.tags').on('change', 'select', function() { 
     var $lis = $('.results > li'), 
      $selected = $('option:selected'); 
     if ($selected.length) { 
      var selector = $selected.map(function() { 
       return '.' + $(this).val(); 
      }).get().join(''); 
      $lis.hide().filter(selector).show().addClass("show"); 
     } else { 
      $lis.show().removeClass("show"); 
     } 
    }); 
}); 

JSFiddle