JSFiddle - React, Tailwind, and code Playground

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" data-level="Junior">Grade 7</option>
    <option value="Grade 8" data-level="Junior">Grade 8</option>
    <option value="Grade 9" data-level="Junior">Grade 9</option>
    <option value="Grade 10" data-level="Junior">Grade 10</option>
    <option value="Grade 11" data-level="Senior">Grade 11</option>
    <option value="Grade 12" data-level="Senior">Grade 12</option>
</select>

JavaScript

let gradeSelect = document.querySelector('.grade_level')

document.getElementById('level').onchange = function() {
    let level = this.value;

    gradeSelect.querySelectorAll('option[value]').forEach(function(option) {
        let match = level === option.dataset.level
        option.disabled = !match

        if(!match){
            option.closest("select").append(option)
        }
    });

    // Sets the first one (Choose Grade Level) selected
    gradeSelect.querySelector('option').selected = true
};