Как заполнить таблицу будут нулевые / пустые значения, но заполнить таблицу при нажатии раскрывающегося списка?

Question

Я новичок в jQuery и создаю веб-приложение со страницами .Net и Razor.Мне было интересно, как мне попытаться сделать так, чтобы таблица отображалась при нажатии кнопки раскрывающегося списка или появлялась при запуске, а затем заполнялась при нажатии на элемент раскрывающегося списка.У меня есть 2 кнопки раскрывающегося списка, раскрывающийся список категорий и раскрывающийся список подкатегорий. При нажатии на элемент раскрывающегося списка категорий он уже может заполнять раскрывающийся список подкатегорий.Так как моя таблица зависит от SubcategoryId, а также UserId, мне нужно, чтобы он был пустым / не отображался до тех пор, пока Subcategory не будет выбрана во втором раскрывающемся меню.У меня есть HTML для создания таблицы, а также JQuery для заполнения раскрывающейся кнопки при нажатии, мне просто нужно выяснить, как заполнить таблицу по нажатию кнопки Подкатегория или сделать весь HTML-рендеринг только после нажатия кнопки подкатегории,Я бы предпочел, чтобы был способ выполнить html для таблицы при нажатии кнопки SubCategoryId, чтобы я мог избежать нулевой ссылки на список Model.Projects <>, так как он не может быть заполнен до SubCategoryкнопка нажата.

Кнопки DropDown перед выбором категории: https://gyazo.com/263ebfbb49232b556721c411dd94ca36

Кнопки DropDown после выбора категории: https://gyazo.com/e089016757ad044769c622850d9ce5ba

Вот мой jQuery для заполнения 2-го раскрывающегося меню на основе вводаиз первого выпадающего меню:

<span class="control-group form-group">
        <span class="controls">
            <label asp-for="CategoryId">Category:  </label>
            <select asp-for="CategoryId" asp-items="Model.categorylist">
                <option value="">---Select Category---</option>
            </select>


            <label asp-for="SubCategoryId">Subcategory:</label>
            <select asp-for="SubCategoryId"><option value="">---Select Subcategory---</option></select>
            @section scripts{
                <script>
                    $(function () {
                        $("#CategoryId").on("change", function () {
                            var categoryId = $(this).val();
                            $("#SubCategoryId").empty();
                            $("#SubCategoryId").append("<option value=''>---Select Subcategory---</option>");
                            $.getJSON(`?handler=SubCategories&categoryId=${categoryId}`, (data) => {
                                $.each(data, function (i, item) {
                                    $("#SubCategoryId").append(`<option value="${item.subCategoryId}">${item.subCategoryName}</option>`);
                                });
                            });
                        });
                    });
                </script>
            }
        </span>
    </span>

Вот HTML-код, который я хочу выполнить во втором выпадающем меню:

<table class="table">
    <tr>
        <th>Project Name</th>
        <th>Project Desc</th>
        <th>File Upload</th>
        <th>SubCategoryId</th>
        <th>UserId</th>
    </tr>

   @foreach(var project in Model.Projects)
    {
        <tr>
            <td>@project.ProjectName</td>
            <td>@project.ProjectDescription</td>
            <td>@project.FileUpload</td>
            <td>@project.SubCategoryId</td>
            <td>@project.UserId</td>
        </tr>
    }
</table>

Надеюсь, вы сможете указать мне правильное направление для решенияэта проблема с этой конечной целью или, возможно, аналогичная конечная цель с равным конечным результатом.Спасибо за ваше время и помощь!