javascript - 筛选类别并显示结果

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