javascript - 根据下拉选择显示或隐藏 <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

我可以建议这个“升级”，使用外部 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();"

• 处理程序的函数参数e (function(e))，然后保存事件对象，当有人更改元素，在本例中为选择框

• event 对象 (e.target) 上的 target 属性包含对被单击的实际元素的引用上，就像你的 document.getElementById("sksb")

• e.target.parentElement.setAttribute() 然后在选择框的父 wrap 上添加属性 data-type div，基于选择的选项，即 data-type="ski"

• 然后 CSS 规则启动，并说:当 wrap div 具有值为“ski”的属性时(data-type="ski")，将显示设置为在类 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>