如何在下拉列表中隐藏基于所选选项的单个div

Question

我必须确保第二个下拉菜单只有在第一个选项（“Tijd”或“Woorden”）被选中时才开始显示。当之后没有选择任何选项时，第二个下拉列表必须再次隐藏。

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

您只需验证并在更改select时隐藏

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

null

 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>