根据下拉列表的选定值更新表中的列表

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

<table id="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据A</td>
    </tr>
    <tr>
      <td>数据2</td>
      <td>数据B</td>
    </tr>
    <tr>
      <td>数据3</td>
      <td>数据C</td>
    </tr>
  </tbody>
</table>

// 获取下拉列表和表格的元素
const dropdown = document.getElementById('dropdown');
const table = document.getElementById('table');

// 添加下拉列表的事件监听器
dropdown.addEventListener('change', function() {
  const selectedValue = dropdown.value; // 获取选定的值

  // 更新表格内容
  if (selectedValue === 'option1') {
    table.innerHTML = `
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>数据1</td>
          <td>数据A</td>
        </tr>
        <tr>
          <td>数据2</td>
          <td>数据B</td>
        </tr>
        <tr>
          <td>数据3</td>
          <td>数据C</td>
        </tr>
      </tbody>
    `;
  } else if (selectedValue === 'option2') {
    table.innerHTML = `
      <thead>
        <tr>
          <th>列3</th>
          <th>列4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>数据4</td>
          <td>数据D</td>
        </tr>
        <tr>
          <td>数据5</td>
          <td>数据E</td>
        </tr>
        <tr>
          <td>数据6</td>
          <td>数据F</td>
        </tr>
      </tbody>
    `;
  } else if (selectedValue === 'option3') {
    table.innerHTML = `
      <thead>
        <tr>
          <th>列5</th>
          <th>列6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>数据7</td>
          <td>数据G</td>
        </tr>
        <tr>
          <td>数据8</td>
          <td>数据H</td>
        </tr>
        <tr>
          <td>数据9</td>
          <td>数据I</td>
        </tr>
      </tbody>
    `;
  }
});