リスト項目が多い為、2つの条件（プルダウン）で絞り込みをしたいです。
当初条件が1つ（地域のみ）だった為、こちらのteratailにお世話になり完成できたのですが、条件が増えてしまったのでさらにカスタマイズが必要となってしまいました。

中身はこのようなソースになっています。

HTML

<select name="area"  class="js-filter-form list_checkbox">
        <option value="">地域</option>
        <option value="tokyo">東京都</option>
        <option value="kanagawa">神奈川県</option>
        <option value="saitama">埼玉県</option>
        <option value="chiba">千葉県</option>
    </select>

    <select name="category"  class="js-filter-form list_checkbox">
        <option value="">カテゴリ</option>
        <option value="restaurant">レストラン</option>
        <option value="izakaya">居酒屋</option>
        <option value="bar">バー</option>
    </select>

    <p class="js-filter-status text_status">全<span>件</span></p>
    <ul class="js-filter-items flex-wrap">
      <li data-cat='{"tokyo","restaurant"}'>東京都 店舗01</li><!-- ＊＊＊条件2つ用＊＊＊ -->
      <li data-cat="tokyo">東京都 店舗02</li>
      <li data-cat="tokyo">東京都 店舗03</li>
      <li data-cat="tokyo">東京都 店舗04</li>
      <li data-cat="tokyo">東京都 店舗05</li>
      <li data-cat="tokyo">東京都 店舗06</li>
      <li data-cat="kanagawa">神奈川県 店舗01</li>
      <li data-cat="kanagawa">神奈川県 店舗02</li>
      <li data-cat="kanagawa">神奈川県 店舗03</li>
      <li data-cat="kanagawa">神奈川県 店舗04</li>
      <li data-cat="kanagawa">神奈川県 店舗05</li>
      <li data-cat="saitama">埼玉県 店舗01</li>
      <li data-cat="saitama">埼玉県 店舗02</li>
      <li data-cat="saitama">埼玉県 店舗03</li>
      <li data-cat="saitama">埼玉県 店舗04</li>
      <li data-cat="chiba">千葉県 店舗01</li>
      <li data-cat="chiba">千葉県 店舗02</li>
      <li data-cat="chiba">千葉県 店舗03</li>
      <li data-cat="chiba">千葉県 店舗04</li>

    </ul>

JS

    itemElement: '>li:not(.hidden)', // 配下のli要素のうち.hiddenでないものを対象とする
    displayItemCount: 3,
    prevNextPageBtnMode: true,
    onePageOnlyDisplay: false,
    paginationClassName: 'pager',
    paginationInnerClassName: 'pager_inner',
    pageNumberClassName: 'pager_num',
});


// プルダウン　絞り込み
$(".js-filter-form").on("change", function(){
  var selected = [];
  $(".js-filter-form :selected").each(function(){
    selected.push($(this).val()); // push()は配列に値を追加します
  });
  console.log(selected);

  var count = 0;
  $(".js-filter-items li").each(function(){
    var cat = $(this).data("cat");
    var is_exist = $.inArray( cat, selected ); // inArray()は配列内に値があるかどうかを調べます
    if (is_exist != -1) {
      $(this).removeClass("hidden");
      count++;
    } else {
      $(this).addClass("hidden");
    }
    $(this).css("display","");  // paginationがつけたdisplay要素を削除する
  });

  if (count) {
    var str = "<span>全" + count + "件</span>";
  } else {
    var str = "該当するアイテムはありません";
  }
  $(".js-filter-status").html(str);

  $('.pager').remove(); // 既に存在するページャーの削除
  $('.js-filter-items').pagination({
      itemElement: '>li:not(.hidden)', // 配下のli要素のうち.hiddenでないものを対象とする
      displayItemCount: 3,
      prevNextPageBtnMode: true,
      onePageOnlyDisplay: false,
      paginationClassName: 'pager',
      paginationInnerClassName: 'pager_inner',
      pageNumberClassName: 'pager_num',
  });

});