JSFiddle - React, Tailwind, and code Playground

HTML

<select id='scope'>
    <option value='1'>school</option>
    <option value='2'>grade</option>
    <option value='3'>class</option>
</select>
<select id='school' style='clear:left'>
    <option>school one</option>
    <option>school two</option>
</select>
<select id='grade'>
    <option>grade one</option>
    <option>grade two</option>
</select>
<select id='class'>
    <option>class one</option>
    <option>class two</option>
</select>

CSS

select{
    padding:5px;   
    float:left;
    margin:10px;
    width:150px;
}

JavaScript

$(document).ready( function() {
    
    $('#grade, #class').hide();
    
    $('#scope').change( function(){
    
        var type = $('option:selected', this).val();
        
        if( type == 2 ){
        
            $('#grade').show();
            $('#class').hide();
        }
        else if( type == 3 ){
        
            $('#grade').show();
            $('#class').show();
        }
        else{
        
            $('#grade').hide();
            $('#class').hide();
        }
    });
});