在另一个选择列表中进行选择后，如何显示/隐藏选择列表？

// HTML
<select id="mainList" onchange="showHideSubList()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<select id="subList1">
  <option value="subOption1">Sub Option 1</option>
  <option value="subOption2">Sub Option 2</option>
</select>

<select id="subList2">
  <option value="subOption3">Sub Option 3</option>
  <option value="subOption4">Sub Option 4</option>
</select>

// JavaScript
function showHideSubList() {
  var mainList = document.getElementById("mainList");
  var selectedValue = mainList.value;

  var subList1 = document.getElementById("subList1");
  var subList2 = document.getElementById("subList2");

  if (selectedValue === "option1") {
    subList1.style.display = "block";
    subList2.style.display = "none";
  } else if (selectedValue === "option2") {
    subList1.style.display = "none";
    subList2.style.display = "block";
  }
}