jQuery show/hide drop-down options based on another drop-down option

Question

I am trying to create a drop-down select menu that will consist of three select boxes, where the 3rd box will show/hide specific option based on an option selected in the 1s

Answer 1

Use selectedIndex property to hide show third selection box

    $("#select_1").on('change',function(){
    if($("#select_1").prop("selectedIndex")==1){
        $('#select_3 option').show(); 
        $('#select_3 option:gt(3)').hide(); 
        //$('#select_3 option:lt(3)').show();
    }else if($("#select_1").prop("selectedIndex")==2){
     $('#select_3 option').show(); 
     $('#select_3 option:lt(4)').hide();   
     $('#select_3 option:gt(6)').hide();   
    }else if($("#select_1").prop("selectedIndex")==3){
     $('#select_3 option').show(); 
     $('#select_3 option:lt(7)').hide();   
    }
});

Demo