有 <div> 根據下拉選擇顯示或隱藏

Question

我要做的是讓頁面根據選擇的內容顯示滑雪板租賃選項或滑雪板租賃選項。 發生的一切就是在做出任何選擇時都選擇了滑雪選項

我的代碼如下

如果您有其他允許只允許使用滑雪板或滑雪板的方式，請告訴我。

 function sksbcheck(nameSelect) { admOptionValue = document.getElementById("sksb").value; if(admOptionValue = "ski"){document.getElementById("ski").style.display = ""; document.getElementById("snb").style.display = "none"; } else{ if(admOptionValue = "snowboard"){document.getElementById("snb").style.display = ""; document.getElementById("ski").style.display = "none"; } else{ if(admOptionValue = "a"){document.getElementById("snb").style.display = "none"; document.getElementById("ski").style.display = "none"; } }} } 

 <h5>Renter 1 Package</h5> <div style="margin-right:2%; height:100px; float:left;"> <label>Skier/Snowboard</label> <select name="feet" id="sksb" required="required" onchange="sksbcheck(this);" style="height:35px; padding:5px; float:left; margin-right:5px; width:100px;"> <option value="a">...</option> <option value="ski">Skis</option> <option value="snowboard">Snowboard</option> </select> </div> <div id="ski" style="margin-left:2%; margin-right:2%; display:none; float:left;"> <label>Ski Options</label> <input type="checkbox" name="vehicle1" value="Skis"> Skis <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Poles"> Poles <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> <div id="snb" style="margin-left:2%; margin-right:2%; display:none; float:left;"> <label>Snowboard Options</label> <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> 

Answer 1

您需要使用==比較值

if(admOptionValue == "ski") {
    document.getElementById("ski").style.display = ""; 
    document.getElementById("snb").style.display = "none"; 
} else if(admOptionValue == "snowboard") {
    document.getElementById("snb").style.display = ""; 
    document.getElementById("ski").style.display = "none"; 
}

Answer 2

我可以建議使用外部CSS和更簡單的腳本結合一些CSS規則來進行“升級”。

使用外部CSS的好處是，您可以重復使用它們，並且標記變得非常清晰易讀。

此外，此腳本還允許您僅通過添加一些標記和CSS規則來添加更多選項。

 document.querySelector('.choose-options').addEventListener('change', function(e) { e.target.parentElement.setAttribute('data-type', e.target.value); }); 

 .choose-wrap { margin-right:2%; height:100px; float:left; } .choose-options { height:35px; padding:5px; float:left; margin-right:5px; width:100px; } .ski-options, .snb-options { display: none; margin-left:2%; margin-right:2%; float:left; } div[data-type=ski] ~ .ski-options { display: block; } div[data-type=snowboard] ~ .snb-options { display: block; } 

 <h5>Renter 1 Package</h5> <div class="choose-wrap"> <label>Skier/Snowboard</label> <select name="feet" required="required" class="choose-options"> <option value="a">...</option> <option value="ski">Skis</option> <option value="snowboard">Snowboard</option> </select> </div> <div class="ski-options"> <label>Ski Options</label> <input type="checkbox" name="vehicle1" value="Skis"> Skis <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Poles"> Poles <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> <div class="snb-options"> <label>Snowboard Options</label> <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> 

---

因此，與您現有的代碼相比，請澄清此代碼的操作步驟：

• document.querySelector()找到select元素並附加onchange處理程序（ addEventListener ），而不是像onchange="sksbcheck();"那樣使用一個內聯onchange="sksbcheck();"

• 處理程序的函數參數e （ function(e) ），然后保存事件對象，當有人更改項目時，該事件對象將傳遞給函數本身，在本例中為選擇框

• event對象（ e.target ）上的target屬性包含對被單擊的實際元素的引用，例如您的document.getElementById("sksb")

• 然后， e.target.parentElement.setAttribute()根據選擇的選項在選擇框的父項wrap div上添加一個屬性data-type ，即data-type="ski"

• 然后CSS規則就會生效，並說：當wrap div的屬性值為“ ski”（ data-type="ski" ）時，將顯示設置為在帶有class ski-options （ div[data-type=ski] ~ .ski-options {...} ），例如在您的if語句中：
  if(admOptionValue = "ski"){document.getElementById("ski").style.display = ""; document.getElementById("snb").style.display = "none"; }

---

更新顯示2個select組

這是您可以循環執行組選擇元素並向每個元素添加事件處理程序的方法

 Array.prototype.slice.call(document.querySelectorAll('.choose-options')).forEach(function(elem) { elem.addEventListener('change', function(e) { e.target.parentElement.setAttribute('data-type', e.target.value); }); }); 

 .wrap { clear: both; } .choose-wrap { margin-right:2%; height:100px; float:left; } .choose-options { height:35px; padding:5px; float:left; margin-right:5px; width:100px; } .ski2-options, .snb2-options, .ski-options, .snb-options { display: none; margin-left:2%; margin-right:2%; float:left; } div[data-type=snowboard2] ~ .snb2-options, div[data-type=ski2] ~ .ski2-options, div[data-type=snowboard] ~ .snb-options, div[data-type=ski] ~ .ski-options { display: block; } 

 <div class="wrap"> <h5>Renter 1 Package</h5> <div class="choose-wrap"> <label>Skier/Snowboard</label> <select name="feet" required="required" class="choose-options"> <option value="a">...</option> <option value="ski">Skis</option> <option value="snowboard">Snowboard</option> </select> </div> <div class="ski-options"> <label>Ski Options</label> <input type="checkbox" name="vehicle1" value="Skis"> Skis <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Poles"> Poles <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> <div class="snb-options"> <label>Snowboard Options</label> <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> </div> <div class="wrap"> <h5>Renter 2 Package</h5> <div class="choose-wrap"> <label>Skier/Snowboard</label> <select name="feet" required="required" class="choose-options"> <option value="a">...</option> <option value="ski2">Skis 2</option> <option value="snowboard2">Snowboard 2</option> </select> </div> <div class="ski2-options"> <label>Ski Options</label> <input type="checkbox" name="vehicle1" value="Skis"> Skis 2<br> <input type="checkbox" name="vehicle2" value="Boots"> Boots 2<br> <input type="checkbox" name="vehicle2" value="Poles"> Poles 2<br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet 2<br> </div> <div class="snb2-options"> <label>Snowboard Options</label> <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard 2<br> <input type="checkbox" name="vehicle2" value="Boots"> Boots 2<br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet 2<br> </div> </div> 

Answer 3

嵌套過多的if語句， if(admOptionValue = "ski")更改為語句if(admOptionValue == "ski")

在這里工作。

 function sksbcheck() { var admOptionValue = document.getElementById("sksb").value; if (admOptionValue == "ski") { document.getElementById("ski").style.display = "block"; document.getElementById("snb").style.display = "none"; } else if (admOptionValue == "snowboard") { document.getElementById("snb").style.display = "block"; document.getElementById("ski").style.display = "none"; } else if (admOptionValue == "a") { document.getElementById("snb").style.display = "none"; document.getElementById("ski").style.display = "none"; } } 

 <h5>Renter 1 Package</h5> <div style="margin-right:2%; height:100px; float:left;"> <label>Skier/Snowboard</label> <select name="feet" id="sksb" required="required" onchange="sksbcheck();" style="height:35px; padding:5px; float:left; margin-right:5px; width:100px;"> <option value="a">...</option> <option value="ski">Skis</option> <option value="snowboard">Snowboard</option> </select> </div> <div id="ski" style="margin-left:2%; margin-right:2%; display:none; float:left;"> <label>Ski Options</label> <input type="checkbox" name="vehicle1" value="Skis"> Skis <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Poles"> Poles <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> <div id="snb" style="margin-left:2%; margin-right:2%; display:none; float:left;"> <label>Snowboard Options</label> <input type="checkbox" name="vehicle1" value="Snowboard"> Snowboard <br> <input type="checkbox" name="vehicle2" value="Boots"> Boots <br> <input type="checkbox" name="vehicle2" value="Helmet"> Helmet <br> </div> 

Answer 4

為div添加屬性名稱=“ groups”

這是示例JSFiddle <div name="groups"></div>