I’m working on a select box that enables/disable another select box options based on the selected value on the first select box.
The code below works well:
When I select Junior, the grade-level select options are disabled (Grade 11 & 12)
When I select Senior the grade-level selection options are disabled (Grade 7, 8, 9 & 10)
Problem
When I change back again to Junior or Senior all the options are being disabled
Expectation
When I change back to either Junior or Senior the options for them should be enabled.
<select name="level" id="level" autofocus>
<option selected disabled>Choose</option>
<option value="Junior">Junior</option>
<option value="Senior">Senior</option>
</select>
<select name="grade_level" class="grade_level">
<option selected disabled>Choose Grade Level</option>
<option value="Grade 7">Grade 7</option>
<option value="Grade 8">Grade 8</option>
<option value="Grade 9">Grade 9</option>
<option value="Grade 10">Grade 10</option>
<option value="Grade 11">Grade 11</option>
<option value="Grade 12">Grade 12</option>
</select>
JavaScript
document.getElementById('level').onchange = function () {
var level = document.getElementById('level');
if (level.value == 'Senior') {
document.querySelectorAll('.grade_level').forEach(function(select) {
Array.from(select.options).forEach(function(option) {
console.log(option.value);
if (option.value.includes('Grade 7') || option.value.includes('Grade 8')
|| option.value.includes('Grade 9') || option.value.includes('Grade 10')
) {
select.removeChild(option);
select.appendChild(option);
option.setAttribute("disabled", true);
}
});
});
} else if (level.value == 'Junior') {
document.querySelectorAll('.grade_level').forEach(function(select) {
Array.from(select.options).forEach(function(option) {
console.log(select.options);
if (option.value.includes('Grade 11') || option.value.includes('Grade 12')) {
select.removeChild(option);
select.appendChild(option);
option.setAttribute("disabled", true);
}
});
});
}
};
Demo:
https://jsfiddle.net/thrivedigital/h4qo7n1c/2/
>Solution :
You’re disabling the options, but you don’t enable it back to do the opposite so after both Junior and Senior are selected, all the Grades options are disabled.
document.getElementById('level').onchange = function () {
var level = document.getElementById('level');
//var strand = document.getElementById('strand');
if (level.value == 'Senior') {
//strand.style.display = 'block';
document.querySelectorAll('.grade_level').forEach(function(select) {
Array.from(select.options).forEach(function(option) {
console.log(option.value);
if (option.value.includes('Grade 7') || option.value.includes('Grade 8')
|| option.value.includes('Grade 9') || option.value.includes('Grade 10')
) {
option.setAttribute("disabled", true);
}
else{
option.removeAttribute("disabled");
}
});
});
} else if (level.value == 'Junior') {
//strand.style.display = 'none';
document.querySelectorAll('.grade_level').forEach(function(select) {
Array.from(select.options).forEach(function(option) {
console.log(select.options);
if (option.value.includes('Grade 11') || option.value.includes('Grade 12')) {
option.setAttribute("disabled", true);
}
else{
option.removeAttribute("disabled");
}
});
});
}
};<select name="level" id="level" autofocus>
<option selected disabled>Choose</option>
<option value="Junior">Junior</option>
<option value="Senior">Senior</option>
</select>
<select name="grade_level" class="grade_level">
<option selected disabled>Choose Grade Level</option>
<option value="Grade 7">Grade 7</option>
<option value="Grade 8">Grade 8</option>
<option value="Grade 9">Grade 9</option>
<option value="Grade 10">Grade 10</option>
<option value="Grade 11">Grade 11</option>
<option value="Grade 12">Grade 12</option>
</select>