JSFiddle - React, Tailwind, and code Playground

HTML

<!-- RUBRIQUE -->
        <select class="ms-RadioText" title="Rubrique" id="ctl00_DropDownChoice" name="ctl00$DropDownChoice">
                <option value="" selected="selected"></option>
                <option value="first option">first option</option>
                <option value="second option">second option</option>        
        </select> 
        
        <!-- SOUS/RUBRIQUE -->
        <select class="ms-RadioText" title="Sous-Rubrique" id="ctl00_DropDownChoiceSub" name="ctl00$DropDownChoiceSub" disabled="">
                <option value="" selected="selected"></option>
                <option value="first sub option 1">first sub option 1</option>
                <option value="first sub option 2">first sub option 2</option>
                <option value="second sub option 1">second sub option 1</option>
                <option value="second sub option 2">second sub option 2</option>
        </select>

JavaScript

//replace spaces with _ in values
jQuery(".ms-RadioText > option").each(function() {

    jQuery(this).attr("value", jQuery(this).attr("value").replace(/ /g, "_"));
});

$('#ctl00_DropDownChoice').change(function() {
    var sel = $(this).val();

    var selCompare = (sel.indexOf('first') != -1) ? "first" : "second";

    if ($(this).val() == "") return false;

    $("#ctl00_DropDownChoiceSub").removeAttr("disabled");

    $('#ctl00_DropDownChoiceSub > option').each(function() {

        if (!($(this).val().indexOf(selCompare) != -1)) {
            $(this).wrap('<span>').hide()
        }

    });

    $('#ctl00_DropDownChoiceSub > span > option').each(function() {

        if (($(this).val().indexOf(selCompare) != -1)) {
            $(this).unwrap("span").show()
        }


    });
});