如何根據下拉列表中的選定選項隱藏單個 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 = ""
}

 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>