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

//first option
//first sub option 1
//first sub option 2

//second option
//second sub option 1
//second sub option 2

//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).attr("disabled","disabled");
        }else{
             $(this).removeAttr("disabled");
        }

    });
       
});