JSFiddle - React, Tailwind, and code Playground

by KelseyW

HTML

<select id="cat" name="cat1">
    <option value>Select Category</option>
    <option value="1">Cat 1</option>
    <option value="2">Cat 2</option>
</select>

<select id="subcat" name="subcat" disabled="disabled">
    <option class="lablel" value>Select Subcategory</option>
    <option rel="1" value="1">Subcat 1.1</option>
    <option rel="1" value="2">Subcat 1.2</option>
    <option rel="2" value="3">Subcat 2.1</option>
    <option rel="2" value="4">Subcat 2.2</option>
</select>

CSS

#subcat option{
    display:none;
}

#subcat option.label{
    display:block;
}

JavaScript

$(function(){
    
    var $cat = $("#cat"),
        $subcat = $("#subcat");
    
    $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
    });
    
});