我有一個select options問題display: none, block。在PC上它可以作業，沒有問題。但在移動設備上，它也可以作業，但在第二次點擊和 1-2 秒后。我不知道我的錯誤是什么。我需要當用戶點擊時yes，place輸入必須是display: block，價格輸入display: none如果用戶點擊輸入必須是no，價格輸入，placedisplay: nonedisplay: block
我的 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>
我的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";
}
});
我的 CSS
#label-price {
display: block;
}
#workspan {
display: block;
}
.place {
display: none;
}
.work-span {
display: none;
}
uj5u.com熱心網友回復：
在選擇上使用 a change event，您可以切換隱藏您想要的任何內容的類。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/489630.html
標籤：javascript html css 选择 移动的