如何使用下拉菜单显示不同的表格？

<select id="table-select">
  <option value="table1">表格1</option>
  <option value="table2">表格2</option>
  <option value="table3">表格3</option>
</select>

<div id="table-container"></div>

// 获取下拉菜单和表格容器元素
var select = document.getElementById("table-select");
var container = document.getElementById("table-container");

// 监听下拉菜单的变化事件
select.addEventListener("change", function() {
  // 获取选择的值
  var selectedValue = select.value;

  // 根据选择的值生成相应的表格内容
  var tableContent = generateTableContent(selectedValue);

  // 将表格插入到表格容器中
  container.innerHTML = tableContent;
});

// 根据选择的值生成相应的表格内容的函数
function generateTableContent(selectedValue) {
  var tableContent = "";

  // 根据选择的值生成相应的表格内容
  if (selectedValue === "table1") {
    tableContent = "<table><tr><th>表格1的表头1</th><th>表格1的表头2</th></tr><tr><td>表格1的数据1</td><td>表格1的数据2</td></tr></table>";
  } else if (selectedValue === "table2") {
    tableContent = "<table><tr><th>表格2的表头1</th><th>表格2的表头2</th></tr><tr><td>表格2的数据1</td><td>表格2的数据2</td></tr></table>";
  } else if (selectedValue === "table3") {
    tableContent = "<table><tr><th>表格3的表头1</th><th>表格3的表头2</th></tr><tr><td>表格3的数据1</td><td>表格3的数据2</td></tr></table>";
  }

  return tableContent;
}