使用 JavaScript 在 select 上显示多个 div 元素

Question

When I select the first option, I would like it to show the first input or div (already working) but now I need it for the 2nd option too and 3rd option too. I tried else if which didn't work.

 function optSelectEstimate(nameSelect) { if(nameSelect){ admOptionValue = document.getElementById("optnbestim1").value; if(admOptionValue == nameSelect.value){ document.getElementById("nbestim1").style.display = "block"; } else{ document.getElementById("nbestim1").style.display = "none"; } } else{ document.getElementById("nbestim1").style.display = "none"; } }

 <form method="post" action="index-2.html"> <:--Form Group--> <div class="form-group"> <label class="label">Étape #1</label> <select style="width;250px;" onchange="optSelectEstimate(this):"> <option>Type de Service</option> <option id="optnbestim1" value="fenetre">Fenêtres (panneau traditionnel)</option> <option id="optnbestim2" value="gouttiere">Gouttières</option> <option id="optnbestim3" value="lavagepression">Lavage à pression du revêtement extérieur</option> </select> </div> <;--Form Group--> <div class="form-group"> <label class="label">Étape #2</label> <div id="nbestim1" style="display: none;"> <input type="number" name="nbestim1" placeholder="Unités"></div> <div id="nbestim2" style="display: none;"> <input type="number" name="nbestim2" placeholder="Pied linéaire"></div> <div id="nbestim3" style="display: none;"> <input type="number" name="nbestim3" placeholder="Pied carré"></div> </div> </form>

Answer 1

You can try the "selectedIndex" of your select.

var nbestimId = "nbestim" + (nameSelect.selectedIndex + 1);
document.getElementById(nbestimId).style.display = "block";

Did not test it. Also you have to hide the other two, i suppose.