HTML-фильтр с тегом Option

Кто-нибудь знает, как сделать это для опции вместо кнопки? Сценарий должен фильтровать раздел HTML. Моя проблема в том, что, по-видимому, это не работает с <option> вместо <button>. В результате ничего не показывает мне вместо всего класса.

CSS

.show {
  display: block;
}
.filterDiv {
  display: none;
}

Это раздел фильтров. По умолчанию он должен быть установлен на всех

<div class = "col-lg-6 col-sm-6 col-12" id = "myBtnContainer">
    <div class = "release-filter justify-content-end d-flex">
            <div class = "filter-title">
                <select name = "year">
                    <option class = "btn active" value = "" onclick = "filterSelection('all')" disabled selected>Filter By Year</option>
                    <option class = "btn" value = "2023" onclick = "filterSelection('2023')">2023</option>
                    <option class = "btn" value = "2022" onclick = "filterSelection('2022')">2022</option>
                    <option class = "btn" value = "2021" onclick = "filterSelection('2021')">2021</option>
                    <option class = "btn" value = "2020" onclick = "filterSelection('2020')">2020</option>
                  </select>
            </div>
    </div>
</div>

Это один из пунктов, который следует отфильтровать. Но, как было сказано выше, это не работает. Он просто ничего не фильтрует и ничего мне не показывает.

<div class = "col-xl-6 col-lg-6 col-12 filterDiv 2023">
    <div class = "collection-release">
    </div>
</div>

JS

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
   var i, arr1, arr2;
   arr1 = element.className.split(" ");
   arr2 = name.split(" ");
   for (i = 0; i \< arr2.length; i++) {
      if (arr1.indexOf(arr2\[i\]) == -1) {
         element.className += " " + arr2\[i\];
      }
   }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
   var i, arr1, arr2;
   arr1 = element.className.split(" ");
   arr2 = name.split(" ");
   for (i = 0; i \< arr2.length; i++) {
      while (arr1.indexOf(arr2\[i\]) \> -1) {
         arr1.splice(arr1.indexOf(arr2\[i\]), 1);
      }
   }
   element.className = arr1.join(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i \< btns.length; i++) {
   btns\[i\].addEventListener("click", function() {
   var current = document.getElementsByClassName("active");
   current\[0\].className = current\[0\].className.replace(" active", "");
   this.className += " active";
   });
}
\</script\>