有 <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>