How to Show a Hidden Div When a Select Option Is Selected

How can I show a hidden div when a select option is selected?

try this:

function showDiv(divId, element){    document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';}

#hidden_div {    display: none;}

<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">   <option value="0">No</option>   <option value="1">Yes</option></select><div id="hidden_div">This is a hidden div</div>

How to hide div if depending on dropdown option selected

When you do the comparison:

element.value != 'None' && 'Refuse to answer'

It will always evaluate to true if element.value is not 'None'. This is because any non-empty string evaluates to true, and since 'Refuse to answer' is not an empty string, it will evaluate to true.

Instead, you need to compare the value property again:

element.value != 'None' && element.value != 'Refuse to answer'

Demo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>

  <style type="text/css">
  #hidden_div {
    display: none;
  }
</style>
</head>
<body>
  <label>What is your favorite color?</label>
  <select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
   <option value="None">None</option>
   <option value="Refuse to answer">Refuse to answer</option>
   <option value="Red">Red</option>
   <option value="Blue">Blue</option>
   <option value="Green">Green</option>
   <option value="Yellow">Yellow</option>
   <option value="Purple">Purple</option>
   <option value="White">White</option>
   <option value="Pink">Pink</option>
   <option value="Black">Black</option>
 </select>
 
 <div id="hidden_div">
  <p>hello</p> 
</div>

</body>
<script type="text/javascript">
  function showDiv(divId, element)
  {
    document.getElementById(divId).style.display = element.value != 'None' && element.value != 'Refuse to answer' ? 'block' : 'none';
  }
</script>
</html>

Show/hide div based on select option not working

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>

How to show/hide div based on select option using typescript

You can use two way binding [(ngModel)]="selectedValue" and *ngIf to show/hide div

<select class="browser-default custom-select" [(ngModel)]="selectedValue">
  <option value="0" selected>single</option>
  <option value="1">Weekly</option>
  <option value="2">Monthly</option>
  <option value="3">Yearly</option>
</select>

<div class="single" *ngIf="selectedValue == 0">single working fine</div>
<div class="weekly" *ngIf="selectedValue == 1">Weekly working fine</div>
<div class="monthly" *ngIf="selectedValue == 2">monthly working fine</div>
<div class="yearly" *ngIf="selectedValue == 3">yearly working fine</div>

Demo https://stackblitz.com/edit/angular-6bxz9y

show hide div based on select option value jQuery

You can do it like this if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {

Demo

//hide partner search form$('.rel_part').hide();
//Search Relationship partner$(document).ready(function() {  $('.rel_status').change(function() {    if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {      $('.rel_part').show();    } else {      $('.rel_part').hide();    }  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select class="rel_status">        <option value="0">---</option>        <option value="1">Single</option>        <option value="2">In a relationship</option>        <option value="3">Engaged</option>        <option value="4">Married</option>        <option value="5">Separated</option>        <option value="6">Divorced</option>        <option value="7">Widowed</option>    </select>

<div class="rel_part">  <input type="text" name="part_name" placeholder="Search"></div>

Hide/Show <option> in select element when another option in another select is selected

You can use document.querySelectorAll('#blockSelector option[name]').. to add hidden class to all your options and then remove hidden class from options where name="yourfirstselectvalue" .

Demo Code :

function filterBlocksByAddress(addressText) {
  console.log(addressText)
  //hide all options.
  document.querySelectorAll('#blockSelector option[name]').forEach(function(el) {
    el.classList.add("hidden")
  });
  //if not first one slected
  if (addressText != "Choose an Address") {
    //loop through options where values matches..
    document.querySelectorAll('#blockSelector option[name=' + addressText + ']').forEach(function(el) {
      el.classList.remove("hidden"); //remove class
    })
  }
  document.getElementById('blockSelector').selectedIndex = 0 //set first vlau slected

}

.hidden {
  display: none
}

<select id="addressSelector" onchange="filterBlocksByAddress(this.options[this.selectedIndex].text)">
  <option value="">Choose an Address</option>
  <option>A</option>
  <option>B</option>
</select>
<select id="blockSelector">
  <option value="">Choose a Block</option>
  <option class="hidden" name="A">
    A1
  </option>
  <option class="hidden" name="A">
    A2
  </option>
  <option class="hidden" name="B">
    B1
  </option>
  <option class="hidden" name="B">
    B2
  </option>

</select>