JSFiddle - React, Tailwind, and code Playground

HTML

<select class="form-control" id="FirstDDL" name="FirstDDL">
    <option>Select Option 1</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
</select>
<select class="form-control" id="SecondDDL" name="SecondDDL">
    <option value="">Select Option 2</option>
    <optgroup label="Option1">
        <option value="12">SubOption1Value1</option>
        <option value="13">SubOption1Value2</option>
        <option value="14">SubOption1Value3</option>
    </optgroup>
    <optgroup label="Option2">
        <option value="49">SubOption2Value1</option>
        <option value="50">SubOption2Value2</option>
        <option value="51">SubOption2Value3</option>
    </optgroup>
    <optgroup label="Option3">
        <option value="33">SubOption3Value1</option>
        <option value="34">SubOption3Value2</option>
        <option value="35">SubOption3Value3</option>
    </optgroup>
</select>

JavaScript

$(document).ready(function () {
    
        $("#FirstDDL").change(function () {
            var thisValue = $(this).val();
    
            var $optGroups = $("#SecondDDL optgroup");
            $optGroups.hide();
    
            switch (thisValue) {
                case "1":
                    $optGroups.filter("[label='Option1']").show();
                    break;
                case "2":
                    $optGroups.filter("[label='Option2']").show();
                    break;
                case "3":
                    $optGroups.filter("[label='Option3']").show();
                    break;
            }
    
        });
    });