JSFiddle - React, Tailwind, and code Playground

HTML

Первое меню:
<select id="menu">
    <option value="0">---</option>
    <option value="1">Эники</option>
    <option value="2">Беники</option>
    <option value="3">Вареники</option>
<select>
    
Второе меню:
<select id="submenu" disabled="disabled">

<select>

CSS

select {width:150px; margin-right:30px;}

JavaScript

// Подменю
var submenus = {
    '1': ['Эники раз', 'Эники два','Эники три'],
    '2': ['Беники раз', 'Беники два','Беники три'],
    '3': ['Вареники раз', 'Вареники два','Вареники три'],
};

// событие выбора в главном меню
$('#menu').change(function(){
    var value = $('#menu').val();
    //Если выбран не пункт "---", т.е. значение ноль
    if (value != '0') {
        // то подставляем пункты меню
        
        // получаем список сабменю
         var subItems = submenus[value];
        
        // собираем html по вкусу
        var html = '';
        for (var i=  0; i < subItems.length; i++) {
            html += '<option>'+ subItems[i] +'</option>'
        }
        // Подставляем html во второй список
        $('#submenu').html(html);
        // снимаем дизайбл
        $('#submenu').removeAttr('disabled');
    }
    else {
        // если выбран пункт ---, то просто дисаблим второе меню
        $('#submenu').attr('disabled', 'disabled');
    }
});