如何使用select选项在javascript中制作动态表列

<form>
  <label for="columns">选择表列：</label>
  <select id="columns" multiple>
    <option value="column1">列1</option>
    <option value="column2">列2</option>
    <option value="column3">列3</option>
    <!-- 其他列选项 -->
  </select>
  <button onclick="showSelectedColumns()">显示选中的列</button>
</form>

function showSelectedColumns() {
  var selectElement = document.getElementById("columns");
  var selectedColumns = [];
  for (var i = 0; i < selectElement.options.length; i++) {
    if (selectElement.options[i].selected) {
      selectedColumns.push(selectElement.options[i].value);
    }
  }
  displayColumns(selectedColumns);
}

function displayColumns(columns) {
  // 根据选中的列生成表格或其他展示方式
  // 示例：创建一个表格并显示选中的列
  var table = document.createElement("table");
  var headerRow = table.insertRow();
  columns.forEach(function(column) {
    var headerCell = document.createElement("th");
    headerCell.textContent = column;
    headerRow.appendChild(headerCell);
  });
  // 将表格添加到页面中的某个元素中
  document.getElementById("tableContainer").appendChild(table);
}