如何将按钮式div网格筛选切换为下拉选择筛选？

你遇到的问题主要有两个点：下拉框选项存在语法错误，以及没有正确传递筛选参数到filterSelection函数。以下是修正后的完整代码：

修正后的HTML #

<select class="filterContainer" onchange="filterSelection(this.value)">
  <option value="all">Show All</option>
  <option value="household">Household Items</option>
  <option value="furniture">Furniture & Appliances</option>
  <option value="tech">Electronics & Tech</option>
  <option value="tools">Tools</option>
  <option value="sports">Sports Equipment</option>
  <option value="transportation">Transportation</option>
  <option value="hobbies">Hobbies</option>
  <option value="medical">Medical Equipment</option>
  <option value="misc">Miscellaneous</option>
  <option value="lost">Lost & Found</option>
</select>

调整后的JavaScript（核心逻辑无需修改） #

filterSelection("all");

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("classifieds-item");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    RemoveClass(x[i], "show");
    if (x[i].id.indexOf(c) > -1) AddClass(x[i], "show");
  }
}

function AddClass(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];}
  }
}

function RemoveClass(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(" ");
}

关键修改说明 #

1. 修正下拉框选项错误：你原本的Household Items选项值多了一个右括号（household)），这会导致筛选时无法匹配到对应ID的元素，现已删除多余括号。
2. 传递筛选参数：将下拉框的onchange事件改为filterSelection(this.value)，这样下拉框切换时会把选中选项的value值直接传递给原有的筛选函数，完全适配你之前写的逻辑。
3. 原有筛选逻辑无需改动：你的filterSelection函数已经支持接收分类参数并通过ID匹配筛选元素，只要参数正确传递就能正常工作。

内容的提问来源于stack exchange，提问作者timmotayyo