使用jQuery的多個下拉串列過濾div

我目前正在嘗試使用 jQuery 實作一個簡單的過濾器，我能夠通過一個下拉選單/選擇來實作它，但是當添加另一個時，事情會變得混亂。

$("select").change(function () {
  let $elementsToFilter = $("#filterable-elements div");

  let $category = $("#category-filter").val();
  let $type = $("#type-filter").val();

  $elementsToFilter.hide();

  $elementsToFilter.filter(function (index, element) {
    let $el = $(element);

    if ($category === "all" && $type == "all") {
      $elementsToFilter.show();
    } else if ($el.data("category") === $category && $el.data("type") === $type) {
      $el.show();
    }
  });
});

這是我當前的代碼，當我嘗試獨立使用下拉選單時問題就開始了，它們只有在組合時才有效。因此，如果只想顯示 data-category = 1 的 div，除非我也選擇一種型別，否則它不起作用。

提前感謝您的任何想法。

編輯：JSFiddle問題

uj5u.com熱心網友回復：

給你..你可以添加一些|| OR條件讓代碼運行即使值等于所有

$("select").change(function () {
  let $elementsToFilter = $("#filterable-elements div");

  let $category = $("#category-filter").val();
  let $type = $("#type-filter").val();

  $elementsToFilter.hide().filter(function (index, element) {
    let $el = $(element);
    return ($el.data("category") === $category || $category == "all") && ($el.data("type") === $type || $type == "all");
  }).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <label for="category-filter">Filter by Category</label>
    <select id="category-filter" name="category-filter">
      <option selected value="all">All categories</option>
      <option value="cat 1">Category 1</option>
      <option value="cat 2">Category 2</option>
      <option value="cat 3">Category 3</option>
    </select>
  </div>

  <div>
    <label for="type-filter">Filter by Type</label>
    <select id="type-filter" name="type-filter">
      <option selected value="all">All types</option>
      <option value="type 2">Type 2</option>
      <option value="type 3">Type 3</option>
      <option value="type 5">Type 5</option>
    </select>
  </div>
</div>

<div id="filterable-elements">
  <div data-category="cat 1" data-type="type 3">EL 2</div>
  <div data-category="cat 2" data-type="type 5">EL 3</div>
  <div data-category="cat 3" data-type="type 5">EL 4</div>
  <div data-category="cat 1" data-type="type 2">EL 5</div>
</div>

您需要了解.each(),.filter()

? 此外，如果您需要檢測是否沒有匹配的資料來執行某些操作，您可以查看下一個示例

顯示代碼片段

$("select").change(function () {
  let $elementsToFilter = $("#filterable-elements div");

  let $category = $("#category-filter").val();
  let $type = $("#type-filter").val();
  let divs = $elementsToFilter.hide().filter(function (index, element) {
                let $el = $(element);
                return ($el.data("category") === $category || $category == "all") && ($el.data("type") === $type || $type == "all");
              });
              
              
  if(divs.length < 1){  // if no data matched 
    console.log("NO Data Matched");
    // or show all of them
    // $elementsToFilter.show();
  }else{
    divs.show(); // show the matched elements
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <label for="category-filter">Filter by Category</label>
    <select id="category-filter" name="category-filter">
      <option selected value="all">All categories</option>
      <option value="cat 1">Category 1</option>
      <option value="cat 2">Category 2</option>
      <option value="cat 3">Category 3</option>
    </select>
  </div>

  <div>
    <label for="type-filter">Filter by Type</label>
    <select id="type-filter" name="type-filter">
      <option selected value="all">All types</option>
      <option value="type 2">Type 2</option>
      <option value="type 3">Type 3</option>
      <option value="type 5">Type 5</option>
    </select>
  </div>
</div>

<div id="filterable-elements">
  <div data-category="cat 1" data-type="type 3">EL 2</div>
  <div data-category="cat 2" data-type="type 5">EL 3</div>
  <div data-category="cat 3" data-type="type 5">EL 4</div>
  <div data-category="cat 1" data-type="type 2">EL 5</div>
</div>

標籤：javascript查询

上一篇：資料屬性陣列的jQuery選擇器

下一篇：使用jQueryAccordion展開/折疊所有功能