CODEWITHSUNDEEP
javascripthtml
C. van Veen
C. van Veen

Reputation: 63

How to hide single div based on selected option from dropdown

I have to make sure the second dropdown menu only starts showing when an option ("Tijd" or "Woorden") is selected in the first one. When no option is selected afterwards, the second dropdown has to hide again.

HTML

<div class="dropdown">
    <p>Spelmodus:</p>
    <select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
      <option></option>
    </select>
</div>
<div id="optieDiv">
    <p id="tijdWoorden"></p>
    <select id="opties" name="opties" onchange="changeOptie(this.value);">
    </select>
</div>

JavaScript

    var spelmodusOpties = {
        "Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
        "Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
    };
    
    function PrepopulateSpelmodus() {
      var spelmodusSelect = document.getElementById('spelmodus');
      var i = 1;
      for (var spelmodus in spelmodusOpties) {
        spelmodusSelect.options[i++] = new Option(spelmodus)
      }
    
    }
    
    function changeSpelmodus(productNameID) {
      var optieSelect = document.getElementById('opties');
      optieSelect.innerHTML = '<option></option>'; // Remove previous options
      var versions = spelmodusOpties[productNameID];
      for (var i = 0; i < versions.length; i++) {
        optieSelect.appendChild(new Option(versions[i].Optie));
      }
    
      var selectie = document.getElementById('spelmodus').value;
      document.getElementById('tijdWoorden').innerHTML = selectie
    
    }
    
    function changeOptie() {
      var productNameID = document.getElementById('spelmodus').value;
      var versions = spelmodusOpties[productNameID];
      for (var i = 0; i < versions.length; i++) {
      }
    }
    
    PrepopulateSpelmodus();

Upvotes: 1

Views: 50

Answers (2)

Tom O.
Tom O.

Reputation: 5941

const optieDivEl = document.querySelector('#optieDiv');

function toggleOptieDiv(event) {
  // Check if the event.target (select) is one of the specified values
  if (['tijd', 'woorden'].includes(event.target.value)) {
    // Do no render `div.optieDiv` 
    optieDivEl.style.display = 'none';
  } else {
    // Render `div.optieDiv`
    optieDivEl.style.display = 'block';
  }
}
document.onload = toggleOptieDiv;
document.querySelector('#spelmodus').addEventListener('change', toggleOptieDiv);
<div class="dropdown">
  <p>Spelmodus:</p>
  <select id="spelmodus" name="spelmodus">
    <option value="">--Please choose an option--</option>
    <option value="tijd">Tijd</option>
    <option value="woorden">Woorden</option>
    <option value="other">Other</option>
  </select>
</div>
<div id="optieDiv">
  <p id="tijdWoorden"></p>
  <select id="opties" name="opties" onchange="changeOptie(this.value);">
  </select>
</div>

Upvotes: 1

Ravi Makwana
Ravi Makwana

Reputation: 2918

You just need to validate and hide on change of select

if(!productNameID){
   document.getElementById('optieDiv').style.display = "none"
   return;
}else{
   document.getElementById('optieDiv').style.display = ""
}


 var spelmodusOpties = {
        "Tijd": [{"Optie": "1 minuut"}, {"Optie": "2 minuten"}, {"Optie": "5 minuten"}],
        "Woorden": [{"Optie": "50 woorden"}, {"Optie": "100 woorden"}, {"Optie": "150 woorden"}],
    };
    
    function PrepopulateSpelmodus() {
      var spelmodusSelect = document.getElementById('spelmodus');
      var i = 1;
      for (var spelmodus in spelmodusOpties) {
        spelmodusSelect.options[i++] = new Option(spelmodus)
      }
    
    }
    
    function changeSpelmodus(productNameID) {
      if(!productNameID){
      document.getElementById('optieDiv').style.display = "none"
      return;
      }else{
      document.getElementById('optieDiv').style.display = ""
      }
      var optieSelect = document.getElementById('opties');
      optieSelect.innerHTML = '<option></option>'; // Remove previous options
      var versions = spelmodusOpties[productNameID];
      for (var i = 0; i < versions.length; i++) {
        optieSelect.appendChild(new Option(versions[i].Optie));
      }
    
      var selectie = document.getElementById('spelmodus').value;
      document.getElementById('tijdWoorden').innerHTML = selectie
    
    }
    
    function changeOptie() {
      var productNameID = document.getElementById('spelmodus').value;
      var versions = spelmodusOpties[productNameID];
      for (var i = 0; i < versions.length; i++) {
      }
    }
    
    PrepopulateSpelmodus();
<div class="dropdown">
    <p>Spelmodus:</p>
    <select id="spelmodus" name="spelmodus" onchange="changeSpelmodus(this.value);">
      <option></option>
    </select>
</div>
<div id="optieDiv" style="display: none">
    <p id="tijdWoorden"></p>
    <select id="opties" name="opties" onchange="changeOptie(this.value);">
    </select>
</div>

Upvotes: 2

Related Questions