JSFiddle - React, Tailwind, and code Playground

HTML

<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
    <!--Below shows when '1 column' is selected is hidden otherwise-->
    <option value="col1">none</option>
    
    <!--Below shows when '2 column' is selected is hidden otherwise-->
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option>
    
    <!--Below shows when '3 column' is selected is hidden otherwise-->
    <option value="col3_mss">layout 3</option>
    <option value="col3_ssm">layout 4</option>
    <option value="col3_sms">layout 5</option>
</select>

JavaScript

$(document).ready(function() {
    $("#column_select").change(function () {
        $("#layout_select")
            .find("option")
            .show()
            .not("option[value*='" + this.value + "']").hide();
       
        $("#layout_select").val(
            $("#layout_select").find("option:visible:first").val());
        
    }).change();
});