使用onchange事件显示数组中的几个项

<select id="mySelect" onchange="displayItems()">
  <option value="all">All Items</option>
  <option value="category1">Category 1</option>
  <option value="category2">Category 2</option>
</select>

<div id="itemList"></div>

// 假设我们有一个包含所有项的数组
var allItems = [
  { name: "Item 1", category: "category1" },
  { name: "Item 2", category: "category2" },
  { name: "Item 3", category: "category1" },
  { name: "Item 4", category: "category2" }
];

function displayItems() {
  var selectElement = document.getElementById("mySelect");
  var selectedValue = selectElement.value;

  var filteredItems;
  if (selectedValue === "all") {
    filteredItems = allItems;
  } else {
    filteredItems = allItems.filter(function(item) {
      return item.category === selectedValue;
    });
  }

  var itemListElement = document.getElementById("itemList");
  itemListElement.innerHTML = "";

  filteredItems.forEach(function(item) {
    var itemElement = document.createElement("p");
    itemElement.textContent = item.name;
    itemListElement.appendChild(itemElement);
  });
}