當選擇元素保存相應的值時,我試圖顯示一個div並隱藏其他div。
我建立了一個包含 4 個選項的選擇元素,預設值為空值,另外三個選項為:下、上、上。我在下面放置了三個隱藏的 div 元素,其中包含 3 個選項中每個選項的內容:下、上和上。我想根據選擇元素的值顯示和隱藏每個 div。這是我的程式碼:
const departments = document.querySelector("#departments"); const lowerdep = document.querySelector(".lower-dep"); const upperdep = document.querySelector(".upper-dep"); const higherdep = document.querySelector(".higher-dep"); if (departments.value = "") { lowerdep.style.display = "none"; upperdep.style.display = "none"; higherdep.style.display = "none"; } else if (departments.value = "lower") { lowerdep.style.display = "block"; } else if (departments.value = "upper") { upperdep.style.display = "block"; } else { higherdep.style.display = "block"; }
.lower-dep, .upper-dep, .higher-dep { display: none; }
<div class=""> <div class=""> <label class="">Department <select id="departments" name="departments"> <option value="" selected>Select Department...</option> <option value="lower">Lower</option> <option value="upper">Upper</option> <option value="higher">Higher</option> </select> </label> </div> </div> <div class="lower-dep"> <div class="input-check"> <input type="checkbox" id="color1" name="color1" value="Red"> <label for="color1"> Red</label> </div> </div> <div class="upper-dep"> <div class="input-check"> <input type="checkbox" id="color1" name="color1" value="Red"> <label for="color1"> Red</label> </div> </div> <div class="higher-dep"> <div class="input-check"> <input type="checkbox" id="color1" name="color1" value="Red"> <label for="color1"> Red</label> </div> </div>
P粉0326494132023-09-07 12:45:40
eventListener
來根據選擇隱藏和顯示元素,並根據需要刪除或新增 d-none
類別。 if/else
語句也是錯誤的,=
用來賦值,==
用來比較。您也可以像我的範例一樣使用 switch case
。 const departments = document.querySelector("#departments"); const lowerdep = document.querySelector(".lower-dep"); const upperdep = document.querySelector(".upper-dep"); const higherdep = document.querySelector(".higher-dep"); departments.addEventListener("change", function(){ lowerdep.classList.add("d-none"); upperdep.classList.add("d-none"); higherdep.classList.add("d-none"); switch (departments.value) { case 'lower': lowerdep.classList.remove("d-none"); break; case 'upper': upperdep.classList.remove("d-none"); break; case 'higher': higherdep.classList.remove("d-none"); break; } })
.d-none { display: none; }
<div class=""> <div class=""> <label class="">Department <select id="departments" name="departments"> <option value="" selected>Select Department...</option> <option value="lower">Lower</option> <option value="upper">Upper</option> <option value="higher">Higher</option> </select> </label> </div> </div> <div class="lower-dep d-none"> <div class="input-check"> <input type="checkbox" id="color-lower" name="color" value="Red"> <label for="color-lower"> Red lower</label> </div> </div> <div class="upper-dep d-none"> <div class="input-check"> <input type="checkbox" id="color-upper" name="color" value="Red"> <label for="color-upper"> Red upper</label> </div> </div> <div class="higher-dep d-none"> <div class="input-check"> <input type="checkbox" id="color-higher" name="color1" value="Red"> <label for="color-higher"> Red higher</label> </div> </div>
P粉2540777472023-09-07 09:07:08
您需要將其包裝在事件偵聽器中,並在顯示之前隱藏所有元素:
departments.addEventListener("change", function() { lowerdep.style.display = "none"; upperdep.style.display = "none"; higherdep.style.display = "none"; if (departments.value == "lower") { lowerdep.style.display = "block"; } else if (departments.value == "upper") { upperdep.style.display = "block"; } else if (departments.value == "higher") { higherdep.style.display = "block"; } });
這樣,每當使用者選擇選項時,就會顯示對應的 div
,而其餘部分將被隱藏。
此外,您還需要將if 語句中的每個=
替換為==
,因為javascript 中的=
是賦值,因此如果您指派的值是真值,則if 語句將會執行。您可能正在尋找 ==
,即相等比較運算子。
完整片段:
const departments = document.querySelector("#departments"); const lowerdep = document.querySelector(".lower-dep"); const upperdep = document.querySelector(".upper-dep"); const higherdep = document.querySelector(".higher-dep"); departments.addEventListener("change", function() { lowerdep.style.display = "none"; upperdep.style.display = "none"; higherdep.style.display = "none"; if (departments.value == "lower") { lowerdep.style.display = "block"; } else if (departments.value == "upper") { upperdep.style.display = "block"; } else if (departments.value == "higher") { higherdep.style.display = "block"; } });
.lower-dep, .upper-dep, .higher-dep { display: none; }
<div class=""> <div class=""> <label class="">Department <select id="departments" name="departments"> <option value="" selected>Select Department...</option> <option value="lower">Lower</option> <option value="upper">Upper</option> <option value="higher">Higher</option> </select> </label> </div> </div> <div class="lower-dep"> <div class="input-check"> <input type="checkbox" id="color1" name="color1" value="Red"> <label for="color1"> Lower dep: Red</label> </div> </div> <div class="upper-dep"> <div class="input-check"> <input type="checkbox" id="color1" name="color1" value="Red"> <label for="color1"> Upper dep: Red</label> </div> </div> <div class="higher-dep"> <div class="input-check"> <input type="checkbox" id="color1" name="color1" value="Red"> <label for="color1"> Higher dep: Red</label> </div> </div>