Tengo un problema con select options con display: none, block . En PC funciona, no hay problema. Pero en el móvil también funciona, pero al segundo clic y después de 1-2 segundos. no se cual es mi error Necesito que cuando el usuario haga clic en yes , la entrada de place debe display: block , display: none si el usuario hace clic en no , la entrada de place debe display: none , display: block ,
mi html
<div class="second-tab"> <div class="form-group"> <span class="work-span" id="workspan">Work?</span> <select id="work" name="work" class="work"> <option value="no" selected>No</option> <option value="yes">Yes</option> </select> </div> <div class="form-group"> <span id="label-price" class="label-price work-span">Price</span> <input type="text" id="price" class="price" /> </div> <div class="form-group"> <span class="label-place work-span">Place</span> <input type="text" id="place" name="place" class="place" /> </div> <div class="form-group"> <button type="submit">Submit </button> </div> </div>mi js
work.addEventListener("click", (e) => { if (e.target.value == "no") { priceInput.style.display = "block"; labelPrice.style.display = "block"; placeInput.style.display = "none"; labelPlace.style.display = "none"; } else if (e.target.value == "yes") { priceInput.style.display = "none"; labelPrice.style.display = "none"; placeInput.style.display = "block"; labelPlace.style.display = "block"; } });mi css
#label-price { display: block; } #workspan { display: block; } .place { display: none; } .work-span { display: none; }Usando un change event en una selección, puede alternar una clase ocultando lo que quiera.
document.getElementById("select").addEventListener("change", () => { document.getElementById("example").classList.toggle("d-none"); }) .d-none{ display:none; } <select id="select"> <option selected>Show</option> <option>Hide</option> </select> <div id="example">example</div>