How to hide single div based on selected option from dropdown

Question

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();

Answer 1

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>

Answer 2

 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>