JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<select name="" id="select1">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <select name="" id="select2">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <select name="" id="select3">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

CSS

select#select3:empty {
    display: none;
}

select#select2:empty {
    display: none;
}

JavaScript

$("#select2").attr("disabled","");
    $("#select3").attr("disabled","");
    $(document).on("change","#select1",function (event) {
        if($("#select1")[0].selectedIndex == 0){
   
            $("#select2")[0].selectedIndex = 2;
            $("#select3")[0].selectedIndex = 2;
        }else{
            
            $("#select2").removeAttr("disabled");
            
            $("#select3").removeAttr("disabled");            
        }
    });