基于dropdown select的Filter divs有没有简单的方法？

<select id="filter">
  <option value="all">All</option>
  <option value="category1">Category 1</option>
  <option value="category2">Category 2</option>
  <option value="category3">Category 3</option>
</select>

<div class="item category1">Item 1 (Category 1)</div>
<div class="item category2">Item 2 (Category 2)</div>
<div class="item category3">Item 3 (Category 3)</div>
<div class="item category1">Item 4 (Category 1)</div>
<div class="item category2">Item 5 (Category 2)</div>
<div class="item category3">Item 6 (Category 3)</div>

document.getElementById("filter").addEventListener("change", function() {
  var selectedValue = this.value;
  
  var items = document.getElementsByClassName("item");
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    
    if (selectedValue === "all" || item.classList.contains(selectedValue)) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  }
});