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

使用下拉菜单显示不同的表格可以通过以下步骤实现：

HTML结构：在HTML文件中创建一个下拉菜单的元素和一个用于显示表格的容器元素，例如：

<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>

JavaScript代码：使用JavaScript监听下拉菜单的变化事件，并根据选择的值动态生成相应的表格内容，然后将表格插入到表格容器中，例如：

// 获取下拉菜单和表格容器元素
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;
}

通过以上步骤，当选择下拉菜单中的不同选项时，相应的表格内容会动态显示在表格容器中。你可以根据实际需求修改生成表格内容的逻辑和样式。