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规则来升级＆＃34;

使用外部CSS是一个很大的优势，因为您可以重复使用它们，并且您的标记变得非常干净以便阅读。

此脚本还允许您通过添加一些标记和CSS规则来添加更多选项。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

因此，与现有代码相比，澄清此代码的用途，作为步骤：

document.querySelector()找到select元素并附加onchange处理程序（addEventListener），而不是使用一个内联，例如onchange="sksbcheck();" < / p>
处理程序的函数参数e（function(e)），然后保存事件对象，当有人更改项目时，该对象会被传递给函数本身，在这种情况下选择框
target对象（event）上的e.target属性，包含对您点击的实际元素的引用，例如document.getElementById("sksb")
e.target.parentElement.setAttribute()然后根据选择的选项在选择框的父级data-type div上添加属性wrap，即{ {1}}
然后CSS规则启动，并说：当data-type="ski" div具有值为＆＃34的属性时，滑雪＆＃34; （wrap），使用类data-type="ski"（ski-options）将显示设置为div，就像在if语句中一样：
div[data-type=ski] ~ .ski-options {...}

更新显示2个if(admOptionValue = "ski"){document.getElementById("ski").style.display = ""; document.getElementById("snb").style.display = "none"; }群组

以下是如何循环组选择元素并为每个

添加事件处理程序

＆＃13;

select

＆＃13;

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);

  });

});

＆＃13;

.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;
}

＆＃13;

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

添加属性名称=＆＃34;群组＆＃34;为divs

Here is example JSFiddle <div name="groups"></div>

根据下拉选择

4 个答案: