如何创建两个相互不交互的独立下拉列表？

<select id="list1">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="list2">
  <option value="optionA">Option A</option>
  <option value="optionB">Option B</option>
  <option value="optionC">Option C</option>
</select>

// 获取下拉列表元素
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");

// 监听下拉列表的change事件
list1.addEventListener("change", function() {
  // 根据选择的选项，更新list2的选项
  if (list1.value === "option1") {
    list2.innerHTML = `
      <option value="optionA">Option A</option>
      <option value="optionB">Option B</option>
      <option value="optionC">Option C</option>
    `;
  } else if (list1.value === "option2") {
    list2.innerHTML = `
      <option value="optionX">Option X</option>
      <option value="optionY">Option Y</option>
      <option value="optionZ">Option Z</option>
    `;
  } else if (list1.value === "option3") {
    list2.innerHTML = `
      <option value="optionM">Option M</option>
      <option value="optionN">Option N</option>
      <option value="optionO">Option O</option>
    `;
  }
});