JSFiddle - React, Tailwind, and code Playground

HTML

<form class='cascadeTest' id='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) {
    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();
    });

    childOptions.not('.static, .sub_' + parent.val()).remove();
}

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

    cascadeSelect(parentSelect, childSelect, "1", "5");
    // Set some defaults here, and fire the 'change' event on the parent list
    // so that the child list gets populated
    parentSelect.val("1").change();
    childSelect.val("5");
});