如何在显示的筛选器中更改其他选择列表时更改选择列表的值

// HTML代码
<select id="filter1">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<select id="filter2">
  <option value="optionA">Option A</option>
  <option value="optionB">Option B</option>
</select>

// JavaScript代码
// 监听filter1的change事件
document.getElementById("filter1").addEventListener("change", function() {
  // 获取filter1的值
  var filter1Value = this.value;

  // 根据filter1的值更新filter2的选项
  var filter2 = document.getElementById("filter2");

  // 清空filter2的选项
  filter2.innerHTML = "";

  // 根据filter1的值生成新的filter2的选项
  if (filter1Value === "option1") {
    var optionA = document.createElement("option");
    optionA.value = "optionA";
    optionA.textContent = "Option A";
    filter2.appendChild(optionA);
  } else if (filter1Value === "option2") {
    var optionB = document.createElement("option");
    optionB.value = "optionB";
    optionB.textContent = "Option B";
    filter2.appendChild(optionB);
  }
});