[英]Show/Hide Multiple DIVs based on Dropdown/Select Option
所以我是 HTML/CSS/Javascript 的新手，我正在嘗試創建一個簡單的表單，它有 5 個部分，它們位於一個單獨的 Div 中。 （所以 5 格，s）
我有一個下拉選項，代碼在這里
<select value="Test1" name="Test1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
根據選擇的選項，我想顯示 Div 的不同選擇。
選項 1 完全不可見 選項 2 是 Div1、Div3 和 Div5 選項 3 是 Div2、Div4 和 Div5 選項 4 是 Div1、Div3 和 Div4 選項 5 是 Div2 和 Div4
我一直在網上查看各種 JS 和 JQuery 腳本來幫助解決這個問題，但我設法讓自己感到困惑。
我不能使用 JQuery，它必須是 Javascript。
如果無法使用 Javascript 執行此操作，那么如果 JQuery 選項可用，我也許可以說服那些重要的人這是必要的。
在此先感謝您提供的任何幫助。
你可以像這樣有一個 javascript function
var display = {
1: [],
2: [1, 3, 5],
3: [2, 4, 5],
4: [1, 3, 4],
5: [2, 4]
}
function selectChanged() {
var sel = document.getElementById("select");
for (var i = 1; i < 6; i++) {
document.getElementById("box" + i).classList.add("hidden");
}
display[sel.value].forEach(function(i) {
document.getElementById("box" + i).classList.remove("hidden");
});
}
我希望這會有所幫助，或者有人會提出更優雅的解決方案。 我對此也很陌生，但這將是我的理論方法。
我會將類分配給 div 標簽。 由於您可以將多個 class 分配給一個元素，因此這應該可行。 例如：
<div id="Div1" class = "optionTwo optionFour hiddenDiv">content...</div>
<div id="Div2" class = "optionThree optionFive hiddenDiv">content...</div>
<div id="Div3" class = "optionTwo optionFour hiddenDiv">content...</div>
<div id="Div4" class = "optionThree optionFour optionFive hiddenDiv">content...</div>
<div id="Div5" class = "optionTwo optionThree hiddenDiv">content...</div>
然后，您可以使用 JavaScript 來確定選擇了哪個選項，然后通過使用不同的 class 名稱調用它，從適當的 div 中禁用 hiddenDiv class。
var selectedOption = document.getElementByName("Test1")[0].value;
if (selectedOption.value == "1") {
var element = document.getElementByClassName("optionOne");
element.classList.remove("hiddenDiv");
}
if (selectedOption.value == "2") {
...
然后在你的 HTML 的頭部，你可以進行如下操作：
<head>
<style>
.hiddenDiv{
display: none;
}
</style>
</head>
只需確保檢查是否選擇了某些內容，然后更改了選擇。 因為如果未選中，這不會將 class 添加回它。 也許考慮告訴它添加 hiddenDiv class 到所有不受當前所選選項影響的 div。
顯示/隱藏具有基於下拉選項值“ jQuery篩選器方法”的多個屬性值的DIV
[英]Show/Hide DIVs That Have Multiple Attribute Values Based On Dropdown Option Value “jQuery Filter Method”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.