Stack Exchange
Show/hide div based on select option not working
ey, I have 1 option in my selector list, and I want the div to not display with that one is selected. And when another is selected its back.
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. But it just hides and then only comes back when I select that one again. Does someone know what causes this?

Where is the myfun() function?

Pass this into your function call to weg(). Then remove the onclick on your first option as this is not needed. 
In your weg function accept the this argument (here I called it elem) and use that to get the value of the selected item using elem.value. Based on the value, you can then choose whether show or hide the element using the element's .style property.
Lastly, as the 1st option is selected as default, you need to hide the div initially. You can do this by adding the style="display: none;" to your div.
See working example below:


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>




I think your logic is contrary of what OP needs, you are showing the div when value=behandeling is selected, he wants to hide.

@CalvinNunes ah, sorry. I miss interpreted the question. I've fixed my answer now. Thanks :)

Use this one. I hope this will works for you.


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>



