选择下拉选项后在HTML表格指定位置显示对应值的实现咨询

要实现下拉选择后即时更新对应单元格内容，使用JavaScript做前端交互即可，无需提交表单触发。你可以参考下面的修改后的完整代码：

<html>
<head>
  <style>
    p {
      font-size:30px;
      font-family:Arial Narrow;
      font-style:italic;
      color:black;
    }
  </style>
  <title>算法演示</title>
</head>
<header>
  <center>
    <p> ALGORITHM </p>
  </center>
</header>
<body>
  INSTRUCTION
  <form action = "" method = "POST">
    <table>
      <tr>
        <td><br></td>
        <!-- 给目标output添加id方便JS定位 -->
        <td><output name = "1st" id="targetOutput"></output></td>   // here
        <td>2nd</td>
        <td>3rd</td>
      </tr>
      <tr>
        <td>
          <select name="inst" id="inst">
            <option value="LW">LW</option>
            <option value="SW">SW</option>
            <option value="BEQ">BEQ</option>
            <option value="JALR">JALR</option>
            <option value="RET">RET</option>
            <option value="ADD">ADD</option>
            <option value="NEG">NEG</option>
            <option value="ADDI">ADDI</option>
            <option value="MULL">MULL</option>
            <option value="MULH">MULH</option>
          </select>
        </td>
        <td>
          <input type = "number" name="p1">
        </td>
        <td>
          <input type = "number" name="p2">
        </td>
        <td>
          <input type = "number" name="p3">
        </td>
      </tr>
    </table>
    <button type = "submit" name = "shoot"> compute </button>
  </form>

  <script>
    // 定义下拉选项和显示内容的映射关系，后续新增选项直接在这里加对应规则即可
    const valueMap = {
      'LW': 'RD.',
      'SW': 'RS',
      // 其他选项的对应值可以按格式在这里补充，比如 'BEQ': 'xxx'
    }
    // 获取两个DOM元素
    const selectEl = document.getElementById('inst')
    const outputEl = document.getElementById('targetOutput')

    // 定义更新显示内容的函数
    function updateOutput() {
      const selectedVal = selectEl.value
      // 如果有对应映射值就显示，没有就显示空或者你自定义的默认值
      outputEl.textContent = valueMap[selectedVal] || ''
    }

    // 监听下拉框的选择变化事件，选择变化时自动更新
    selectEl.addEventListener('change', updateOutput)
    // 页面加载完成后先执行一次，显示默认选项对应的内容
    updateOutput()
  </script>

<?php
// 你原来的PHP后端逻辑可以继续写在这里
?>
</body>
</html>

如果你需要给其他下拉选项也添加对应显示规则，直接在valueMap对象里按照'选项值': '要显示的内容'的格式补充即可。

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