jquery - ドロップダウンjqueryフィルターを個々のチェックボックスに変更します

Question

このコードを作成するのに助けが必要です

<select id="fruit" class="friltro">
  <option value="all">All fruits</option>
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="pineapple">pineapple</option>
  </select>
  <select id="price" class="friltro">
  <option value="all">All prices</option>
  <option value="1">$1</option>
  <option value="3">$3</option>
  <option valenter code hereue="4">$4</option>
</select>

個々のチェックボックスにこれが私がこれまで持っているものです

<input type="checkbox" id="price" value="all" class="filtro" >
<label for="filtro" >all</label>
<input type="checkbox" id="apple" value="apple" class="filtro" >
<label for="filtro" >apple</label>

しかし、ドロップダウンはまったく機能しませんが、チェックボックスにしようとすると機能しなくなります。

また、ここにjqueryコードがあります

$('.friltro').change(function () {
var criteria = '';
var showAll = true;
$('.friltro').each(function () {
    var val = $(this).children(':selected').val();
    if (val !== 'all') {
        criteria += '.' + $(this).attr('id') + '-' + val;
        showAll = false;
    }
});
if (showAll) {
    $('.item').show();
} else {
    $('.item').hide();
    $(criteria).show();
}

}); </p>

また、ここに私がフィルタリングしようとしているものがあります

 <div class="item apple 1>

Apple $1


</div>
<div class="item orange 4">

An orange that costs 4 dollars
</div>

フィルタリングされるものは非常に単純ですが、スクリプトが機能したら、画像 css を追加します。誰でも助けることができますか？