如何根据下拉菜单上的选定选项在表格上显示数据？

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

<table id="datatable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容将通过JavaScript动态生成 -->
  </tbody>
</table>

// 监听下拉菜单的变化事件
document.getElementById('dropdown').addEventListener('change', function() {
  // 获取选定选项的值
  var selectedOption = this.value;

  // 发起数据请求
  // 可以使用Ajax等方式向后端发送请求，并将selectedOption作为参数

  // 假设后端返回的数据为一个包含对象的数组
  var responseData = [
    { column1: '数据1-1', column2: '数据1-2', column3: '数据1-3' },
    { column1: '数据2-1', column2: '数据2-2', column3: '数据2-3' },
    { column1: '数据3-1', column2: '数据3-2', column3: '数据3-3' }
  ];

  // 更新表格数据
  var tableBody = document.getElementById('datatable').getElementsByTagName('tbody')[0];
  tableBody.innerHTML = ''; // 清空表格内容

  // 使用循环动态生成表格行和单元格，并填充数据
  for (var i = 0; i < responseData.length; i++) {
    var rowData = responseData[i];
    var row = document.createElement('tr');

    var cell1 = document.createElement('td');
    cell1.textContent = rowData.column1;
    row.appendChild(cell1);

    var cell2 = document.createElement('td');
    cell2.textContent = rowData.column2;
    row.appendChild(cell2);

    var cell3 = document.createElement('td');
    cell3.textContent = rowData.column3;
    row.appendChild(cell3);

    tableBody.appendChild(row);
  }
});