我必须确保第二个下拉菜单只有在第一个选项（“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();
您只需验证并在更改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>