如何用JavaScript实现JSP表单中选项菜单的排他式切换？

你的代码核心问题是切换选项时仅渲染当前选中项的内容，并未清空之前已显示的其他选项内容，导致多个内容同时留在页面上。以下是修改后的完整代码，同时适配JSP表单参数获取需求：

修改后的JavaScript代码 #

function myFunction() {
  // 先清空所有选项容器的内容
  document.getElementById("aid").innerHTML = "";
  document.getElementById("bid").innerHTML = "";
  document.getElementById("cid").innerHTML = "";

  const selectElement = document.getElementById("abcid");
  const selectedIndex = selectElement.selectedIndex;

  if (selectedIndex === 1) {
    document.getElementById("aid").innerHTML = `A:<select name="aSelect">
      <option value="">Select-</option>
      <option value="Alex">Alex</option>
      <option value="Jack">Jack</option>
    </select>`;
  } else if (selectedIndex === 2) {
    document.getElementById("bid").innerHTML = `B:<select name="bSelect">
      <option value="">Select-</option>
      <option value="US">US</option>
      <option value="Australia">Australia</option>
      <option value="India">India</option>
    </select>`;
  } else if (selectedIndex === 3) {
    document.getElementById("cid").innerHTML = `C:<select name="cSelect">
      <option value="">Select-</option>
      <option value="Blue">Blue</option>
      <option value="Green">Green</option>
      <option value="Red">Red</option>
    </select>`;
  }
}

修改后的HTML（JSP）代码 #

<form action="你的处理页面.jsp" method="post">
  <table>
    <tr>
      <td>ABC:
        <select id="abcid" onchange="myFunction()">
          <option value="">Select-</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </td>
    </tr>
    <tr>
      <td id="aid"></td>
    </tr>
    <tr>
      <td id="bid"></td>
    </tr>
    <tr>
      <td id="cid"></td>
    </tr>
    <tr>
      <td><input type="submit" value="提交"></td>
    </tr>
  </table>
</form>

JSP获取参数说明 #

在处理表单的JSP页面中，可通过以下方式获取选中的参数：

// 获取A选项的选中值
String aValue = request.getParameter("aSelect");
// 获取B选项的选中值
String bValue = request.getParameter("bSelect");
// 获取C选项的选中值
String cValue = request.getParameter("cSelect");

关键修改点 #

• 每次切换选项前，先清空所有目标容器的内容，确保仅显示当前选中项对应的内容
• 给动态生成的<select>添加name属性，并给<option>设置value值，保证表单提交时能正确传递参数
• 用模板字符串（`）简化HTML拼接，让代码更清晰易读

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