如何根据下拉列表中的选定选项隐藏单个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

您只需要验证并隐藏选择的更改

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>