enable-disable-options

by jdfuwuww

HTML

<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);
                }
            });
        });
    }
};