Как разрешить в раскрывающемся меню добавить еще один элемент списка выбора и обновить его в базе данных?

Question

Я создаю веб-приложение с .Net и Razor Pages.У меня есть раскрывающееся меню «Категория», и в зависимости от того, что было выбрано в раскрывающемся меню «Категория», раскрывающееся меню «Подкатегория» будет заполнено элементами подкатегории.Я хочу, чтобы у пользователя была возможность добавить свою собственную подкатегорию, которая не может быть одной из предопределенных подкатегорий в списке.Я могу сделать это с отдельной формой-публикацией и в новом div, но мне было интересно, могу ли я сделать это непосредственно из выпадающего меню подкатегории, возможно, в выпадающем меню есть опция «Добавить подкатегорию», а затем запроситьпользователь для имени подкатегории и описания подкатегории на стороне.

Это мой вид для этой страницы, который отображает категории и в зависимости от выбранной категории он заполняет меню подкатегорий:

<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>

Так выглядит мое выпадающее меню перед категориейбыло выбрано: https://gyazo.com/de88d20fb9a6092836242454fb357308

Вот как они выглядят после выбора категории: https://gyazo.com/8805c4eb95f9492ccd44f2360804148f

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