求助：如何用JavaScript切换两个<div>包裹的隐藏表单？

问题根源 #

1. HTML结构错误：<input>按钮放在<select>标签内不符合规范，select仅允许包含<option>或<optgroup>元素。
2. 逻辑覆盖不全：原JS仅操作userForm，未处理helpForm，也未根据下拉选项的选中值判断显示目标。
3. 事件绑定错误：触发逻辑绑定在了下拉框的点击事件上，而非「Go」按钮。

修正后的完整代码 #

CSS（初始隐藏表单）

#userForm, #helpForm {
    display: none;
}

HTML（修正结构与事件绑定）

<form> 
 <div class="dropDown">
   <select id="select">
      <option disabled selected>Choose to fill out help form or general feedback form please.</option>
      <option value="user">User Feedback Form</option>
      <option value="help">User Help Form</option> 
   </select>
   <input type="button" value="Go" onclick="go()">
 </div>
</form>
<div id="userForm">A</div>
<div id="helpForm">B</div>

JavaScript（实现正确切换逻辑）

function go() {
    const selectedValue = document.getElementById("select").value;
    const userForm = document.getElementById("userForm");
    const helpForm = document.getElementById("helpForm");

    if (selectedValue === "user") {
        userForm.style.display = "block";
        helpForm.style.display = "none";
    } else if (selectedValue === "help") {
        helpForm.style.display = "block";
        userForm.style.display = "none";
    }
}

关键改动说明 #

• 调整按钮位置：将「Go」按钮移出select标签，保证HTML结构合法。
• 优化选项标识：给<option>添加value属性，便于快速获取选中的表单类型。
• 重构触发逻辑：将表单切换逻辑绑定到按钮点击事件，根据选中值精准控制两个表单的显示/隐藏状态。
• 初始状态控制：通过CSS默认隐藏两个表单，避免页面加载时的混乱显示。

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