如何根据selectbox中的值显示或隐藏行？

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

<table>
  <tr id="row1">
    <td>Row 1</td>
  </tr>
  <tr id="row2">
    <td>Row 2</td>
  </tr>
  <tr id="row3">
    <td>Row 3</td>
  </tr>
</table>

document.getElementById("selectBox").addEventListener("change", function() {
  var selectedValue = this.value;  // 获取选中的值

  // 根据选中的值来显示或隐藏行
  if (selectedValue === "option1") {
    document.getElementById("row1").style.display = "table-row";
    document.getElementById("row2").style.display = "none";
    document.getElementById("row3").style.display = "none";
  } else if (selectedValue === "option2") {
    document.getElementById("row1").style.display = "none";
    document.getElementById("row2").style.display = "table-row";
    document.getElementById("row3").style.display = "none";
  } else if (selectedValue === "option3") {
    document.getElementById("row1").style.display = "none";
    document.getElementById("row2").style.display = "none";
    document.getElementById("row3").style.display = "table-row";
  }
});