Question

好的，我的选择器列表中有1个选项，我希望div不被选中时显示。而当另一个被选中时，它的背面。

HTML：

function weg() {
  var x = document.getElementById("wegwezen");
  if (x.style.display === "none") {
    x.style.display = "block";
}   else {
    x.style.display = "none";
  }
}

<select name="cars" class="" style="border:0px;border-bottom:1px solid #b70000;margin-left: 128px;width:200px;" id="state" onchange="myfun()">
 <option value="behandeling" onclick="weg();" selected>Soort behandeling</option>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
</select>

<div id="wegwezen"><p><b>Behandeling:</b>   <span id="pr"></span>  €00,00</p></div>

因此，当选择“ Soort behandeling”时，div需要隐藏。但是它只是隐藏起来，只有当我再次选择它时才会回来。有人知道是什么原因造成的吗？

Answer 1

将this传递到对weg()的函数调用中。然后，在不需要的第一个onclick上删除option。

在您的weg函数中接受this参数（在这里我称之为elem），并使用该参数通过elem.value获取所选项目的值。根据该值，然后可以使用元素的.style属性选择是显示还是隐藏该元素。

最后，由于选择了第一个选项作为默认选项，因此您首先需要隐藏div。您可以通过将style="display: none;"添加到div来完成此操作。

请参见下面的工作示例：

function weg(elem) {
  var x = document.getElementById("wegwezen");
  if(elem.value !== "behandeling") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<select name="cars" class="" style="border:0px;border-bottom:1px solid #b70000;margin-left: 128px;width:200px;" id="state" onchange="weg(this)">
  <option value="behandeling" selected>Soort behandeling</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<div id="wegwezen" style="display: none;">
  <p><b>Behandeling:</b> <span id="pr"></span> €00,00</p>
</div>

Answer 2

使用这个。我希望这对您有用。

function weg(elem) {
  var x = document.getElementById("wegwezen");

if(elem.value == "behandeling"){
x.style.display = "none";
}

else{

  if (x.style.display === "none") {
    x.style.display = "block";
}   
  }
}

<select name="cars" class="" style="border:0px;border-bottom:1px solid #b70000;margin-left: 128px;width:200px;" id="state" onchange="weg(this)">
 <option value="behandeling" selected>Soort behandeling</option>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
</select>

<div id="wegwezen" style="display:none;"><p><b>Behandeling:</b>   <span id="pr"></span>  €00,00</p></div>

根据选择选项显示/隐藏div不起作用

2 个答案: