JSFiddle - React, Tailwind, and code Playground

HTML

<form class="cascadeTest">
    <select class='parent' name='parent' size='10'>
        <option value='1'>Category 1 -></option>
        <option value='2'>Category 2 -></option>
    </select>
    <select class='child' id='child' size='10'>
        <option class='sub_1' value='5'>Custom Subcategory 1.1</option>
        <option class='sub_1' value='3'>Subcategory 1.1</option>
        <option class='sub_2' value='4'>Subcategory 2.1</option>
    </select>
</form>

JavaScript

function cascadeSelect(parent, child, childVal) {
        
        var childOptions = child.find('option:not(.static)');
        child.data('options', childOptions);

        parent.change(function () {
            childOptions.remove();
            child.append(child.data('options').filter('.sub_' + this.value)).change();
        })

            
        // This like removes all the option!
        // childOptions.not('.static, .sub_' + parent.val()).remove();

        if (childVal != '') {
            child.find("option[value=" + childVal + "]").attr("selected", "selected");
        }
    }

    $(function () {
        cascadeForm = $('.cascadeTest');
        parentSelect = cascadeForm.find('.parent');
        childSelect = cascadeForm.find('.child');

        cascadeSelect(parentSelect, childSelect, "5");
    });