如何在asp.net的主标题中添加子标题

Question

对于父标题和子标题，我有两个下拉列表。当我选择父标题时，它将添加到我的表中，但是我不知道如何将子标题添加到所选父标题中。现在，当我添加副标题时，它将像主标题一样添加到表格的最后一行。

<script type="text/javascript">
        $(document).ready(function () {
            populateParentHeaderBox();

            $('.addHeader-save').on('click', function () {
                //save
                $.ajax({
                    url: "/api/BudgetAPI/AddHeader/?ah_name=" + $('.addHeader-name').val() + "&ah_budgetId=" +
                        $('.selectBudget').val() + "&ah_type=" + $('.addHeader-type').val() + "&ah_header=" + $('.addHeader-heading').val()+
                         "&ah_id" + $('.addHeader-id').val(),
                    type: "POST",
                    data: null,
                    cache: false,
                    statusCode: {
                        200: function (data) {                                                      
                            $('.addHeader-name').val('');
                            $('.addHeader-heading').val('');
                            $('#addHeaderPopup').trigger('close');
                            getFinPlannerTable();

                        }
                    }
                });
            });

            $('.addHeader-type').on('change', function () {
                populateParentHeaderBox();
            });

            $('.addHeader-header').on('change', function () {
                populateParentHeaderBox();
            });
        });

        //GetHeadersList(bool ghl_isExpense)
        function populateParentHeaderBox() {
            var type = $('.addHeader-type').val() == "EXPENSES" ? true : false;
            var mtxId = $('.selectBudget').val();
            $.ajax({
                url: "/api/BudgetAPI/GetHeadersList/?ghl_isExpense=" + type + "&ghl_mtxBId=" + mtxId,
                type: "GET",
                data: null,
                cache: false,
                statusCode: {
                    200: function (data) {
                        $('.addHeader-heading').html('<option value="0">No Parent</option>');
                        data.forEach(function (header) {
                            $('.addHeader-heading').append('<option value="' + header.id + '">' + header.name + '</option>');
                        });

                        $('.addHeader-heading').change(function (row) {
                            if ($(this).val() != "No Parent") {
                                $('.budget-planner-table-row-item table-left-col').html('<option value="' + row.id + '">' + row.name + '</option>');
                                ('.budget-planner-table-row-item table-left-col' + row.name.parent).ppend('<option value="' + row.id + '">' + row.name + '</option>');
                            }
                        });

                    }
                }
            });
        }