下拉菜单选值变更时如何自动更新网页中的矩阵输入表格

1. 新增矩阵尺寸下拉选择框 #

在页面合适位置插入下拉选择器和表格渲染容器，示例代码如下：

<label for="matrix-size">选择行列式矩阵尺寸：</label>
<select id="matrix-size">
  <option value="2">2×2</option>
  <option value="3" selected>3×3（默认）</option>
  <option value="4">4×4</option>
  <option value="5">5×5</option>
  <option value="6">6×6</option>
</select>
<!-- 原有的表格渲染容器 -->
<div id="display_id"></div>

2. 绑定选择事件实现自动更新 #

你可以任选以下两种绑定方式：

最简内联绑定 #

直接给下拉框加onchange属性，选中时直接触发表格生成：

<select id="matrix-size" onchange="generate_table(+this.value, +this.value, 'display_id')">
  <!-- 选项内容同上 -->
</select>

规范事件监听写法（推荐） #

避免内联JS耦合，页面加载完成后自动绑定事件、生成默认尺寸表格：

window.addEventListener('load', () => {
  const sizeSelector = document.getElementById('matrix-size')
  // 初始化生成默认3×3表格
  generate_table(3, 3, 'display_id')
  // 监听选择变化事件
  sizeSelector.addEventListener('change', e => {
    const targetSize = parseInt(e.target.value)
    generate_table(targetSize, targetSize, 'display_id')
  })
})

注意：如果你的generate_table函数没有自带旧表格清理逻辑，会出现新旧表格堆叠的问题，只需要在generate_table函数开头加一行清空容器的代码即可：

// 假设你的函数第三个参数叫containerId，替换为你自己的形参名即可
document.getElementById(containerId).innerHTML = ''

内容的提问来源于stack exchange，提问作者dekaottoman