Início / user-21056890

Q-Tip's questions

Martin Hope
Q-Tip
Asked: 2025-03-10 04:45:13 +0800 CST
  • 6

Preciso ocultar um div dentro do meu formulário de pedido (de cálculo) até que uma seleção seja feita em um menu de seleção. Reduzi esse exemplo de 'Formulário de pedido de sorvete' para ver se alguém tem alguma orientação.

Neste exemplo, eu gostaria de ocultar a div 'toppings' até que uma seleção seja feita no menu de seleção 'scoopsSelector'.

.plus {
  display: none;
}
<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>

  <!-- This hidden input uses it's population to pass the <select> text instead of the <select> 
    value to the php form handler  -->

  <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;
    })
  </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;
      var more = document.getElementById("add");
      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>

javascript