如何从下拉框选择中动态显示新的表值？

<select id="selectBox">
  <option value="value1">选项1</option>
  <option value="value2">选项2</option>
  <option value="value3">选项3</option>
</select>

<table id="tableContainer">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 动态添加的表值将显示在这里 -->
  </tbody>
</table>

// 假设以下为表值数据
var tableData = [
  { value: "value1", column1: "值1-列1", column2: "值1-列2" },
  { value: "value2", column1: "值2-列1", column2: "值2-列2" },
  { value: "value3", column1: "值3-列1", column2: "值3-列2" }
];

// 下拉框change事件处理函数
document.getElementById("selectBox").addEventListener("change", function() {
  var selectedValue = this.value;
  var filteredData = tableData.filter(function(item) {
    return item.value === selectedValue;
  });

  // 清空表格内容
  var tableBody = document.getElementById("tableBody");
  tableBody.innerHTML = "";

  // 动态添加表值到表格
  filteredData.forEach(function(item) {
    var row = document.createElement("tr");
    var column1 = document.createElement("td");
    var column2 = document.createElement("td");
    column1.textContent = item.column1;
    column2.textContent = item.column2;
    row.appendChild(column1);
    row.appendChild(column2);
    tableBody.appendChild(row);
  });
});