如何在表单中隐藏div，直至用户完成下拉选择？

要实现用户选择冰淇淋球数量后才显示配料区的需求，只需要两步简单修改：

1. 初始隐藏配料区 #

在现有CSS中添加样式，让toppings容器默认处于隐藏状态：

.plus {
  display: none;
}
#toppings {
  display: none;
}

2. 监听选择事件，控制显示/隐藏 #

修改scoopsSelector的事件监听代码，当用户选择有效选项（非默认的"0"值）时显示配料区；若用户回到无效选项（兼容极端场景）则重新隐藏：

const scoopsSelector = document.getElementById('scoopsSelector')
scoopsSelector.addEventListener('input', function() {
  let selectedOptText = scoopsSelector.options[scoopsSelector.selectedIndex].text
  document.querySelector('.scoops').value = selectedOptText;
  
  // 新增：控制配料区显示状态
  const toppingsDiv = document.getElementById('toppings');
  toppingsDiv.style.display = this.value !== '0' ? 'block' : 'none';
})

修改后的完整代码 #

CSS #

.plus {
  display: none;
}
#toppings {
  display: none;
}

HTML #

<h1>Ice Cream Order Form</h1>

<form action="icecream_formHandler.php" method="post" enctype="multipart/form-data">

  <select id="flavor" name="flavor">
    <option selected="true" disabled="disabled">Select Your Flavor</option>
    <option value="Vanilla">Vanilla</option>
    <option value="Chocolate">Chocolate</option>
    <option value="Strawberry">Mixed</option>
  </select><br><br>

  <select id="scoopsSelector" name="scoopsSelector" onchange="calcuMath()">
    <option value='0' selected="true" disabled="disabled">How Many Scoops?</option>
    <option value="3">One Scoop - $3.00</option>
    <option value="5">Two Scoops - $5.00</option>
    <option value="7">Three Scoops - $7.00</option>
  </select><br><br>

  <!-- 隐藏输入框用于传递选择文本给后端 -->
  <input type="hidden" id="scoops" class="scoops" name="scoops">

  <script>
    const scoopsSelector = document.getElementById('scoopsSelector')
    scoopsSelector.addEventListener('input', function() {
      let selectedOptText = scoopsSelector.options[scoopsSelector.selectedIndex].text
      document.querySelector('.scoops').value = selectedOptText;
      
      // 控制配料区显示/隐藏
      const toppingsDiv = document.getElementById('toppings');
      toppingsDiv.style.display = this.value !== '0' ? 'block' : 'none';
    })
  </script>

  <div name="toppings" id="toppings">
    <p>Toppings: (Optional)</p>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>
    <input type="hidden" id="nuts" name="nuts" value="0" ><input type="checkbox"
    name="nutsCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value; 
    calcuMath();">&nbsp;Nuts $3.00<br><br>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>
    <input type="hidden" id="sprinkles" name="sprinkles" value="0"><input type="checkbox"
    name="sprinklesCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value; 
    calcuMath();">&nbsp;Sprinkles $3.00<br><br>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>
    <input type="hidden" id="syrup" name="syrup" value="0"><input type="checkbox"
    name="syrupCheckbox" onchange="this.previousSibling.value=4-this.previousSibling.value; 
    calcuMath();">&nbsp;Syrup $4.00<br><br><br>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>
  </div>

  <select id="dishSelector" name="dishSelector" onchange="calcuMath()">
    <option value='0' selected="true" disabled="disabled">Cup or Cone</option>
    <option value="3">Cup - $3.00</option>
    <option value="4">Cone - $4.00</option>
  </select><br><br><br>

  <input type="hidden" id="dish" class="dish" name="dish">
  <script>
    const dishSelector = document.getElementById('dishSelector')
    dishSelector.addEventListener('input', function() {
      let selectedOptText = dishSelector.options[dishSelector.selectedIndex].text
      document.querySelector('.dish').value = selectedOptText;
    })
  </script>

  TOTAL: $<a id="result"></a><br><br>

  <script>
    function calcuMath() {
      var z;
      var a = document.getElementById("scoopsSelector").value;
      var b = document.getElementById("nuts").value;
      var c = document.getElementById("sprinkles").value;
      var d = document.getElementById("syrup").value;
      var e = document.getElementById("dishSelector").value;
      var sel = document.getElementById("plus");
      var selection = sel.options[sel.selectedIndex].value;
      if (selection == "add") {
        z = parseFloat(a) + parseFloat(b) + parseFloat(c) + parseFloat(d) + parseFloat(e);
      }
      document.getElementById("result").innerHTML = "" + z + "";
    }
  </script>

  <input type="submit" id="submitButton" name="submitButton" value="Place Order">
</form>

补充说明 #

• 用CSS初始隐藏配料区，避免页面加载时出现短暂的内容闪烁问题。
• 监听input事件而非仅change，能覆盖所有选择变化场景，确保状态同步。
• 通过判断选项value是否为"0"来触发显示逻辑，适配原表单的默认选项设置。

内容的提问来源于stack exchange，提问作者Q-Tip