根据选项id在下拉列表中点击一个选项后，如何在html表格中显示数据？

<select id="dropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<table id="data-table">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
</table>

<script>
  document.getElementById("dropdown").addEventListener("change", function() {
    var selectedOption = this.value;
    displayData(selectedOption);
  });
  
  function displayData(option) {
    var dataTable = document.getElementById("data-table");
    
    // 清空表格中的数据
    while (dataTable.rows.length > 1) {
      dataTable.deleteRow(1);
    }
    
    // 根据选项id显示相应的数据
    switch (option) {
      case "option1":
        // 向表格中添加行和数据
        var newRow1 = dataTable.insertRow(1);
        var cell1_1 = newRow1.insertCell(0);
        cell1_1.innerHTML = "数据1";
        var cell1_2 = newRow1.insertCell(1);
        cell1_2.innerHTML = "数据2";
        var cell1_3 = newRow1.insertCell(2);
        cell1_3.innerHTML = "数据3";
        break;
      case "option2":
        // 向表格中添加行和数据
        var newRow2 = dataTable.insertRow(1);
        var cell2_1 = newRow2.insertCell(0);
        cell2_1.innerHTML = "数据4";
        var cell2_2 = newRow2.insertCell(1);
        cell2_2.innerHTML = "数据5";
        var cell2_3 = newRow2.insertCell(2);
        cell2_3.innerHTML = "数据6";
        break;
      case "option3":
        // 向表格中添加行和数据
        var newRow3 = dataTable.insertRow(1);
        var cell3_1 = newRow3.insertCell(0);
        cell3_1.innerHTML = "数据7";
        var cell3_2 = newRow3.insertCell(1);
        cell3_2.innerHTML = "数据8";
        var cell3_3 = newRow3.insertCell(2);
        cell3_3.innerHTML = "数据9";
        break;
      default:
        break;
    }
  }
</script>