根據選擇選項顯示/隱藏 div 不起作用

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>

So when "Soort behandeling" is selected the div needs to hide. 但它只是隱藏，然后只有當我再次選擇那個時才會回來。 有人知道這是什么原因嗎？

Answer 1

this傳遞到您對weg()函數調用中。 然后刪除您的第一個option上的onclick ，因為這不是必需的。

在您的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>