How the dependency drop will work during onload with JQuery

There is some data inside a table

When I press the edit button, I can edit all the data for that row.Menu Category and Menu These two data came from Dependent dropdown.

with this code the dropdown in the menu was supposed to show when the menu categories were selected.

   modal.find('.modal-body #menu_category_update').val(menu_item_category_selected);
   modal.find('.modal-body #menu_update').val(menu_item_selected);

This code goes through the menu category ID and selects Fastfood Dropdown.

$(document).ready(function () {
    $(document).on('change','#menu_category_update',function(){
        $("#menu_update").empty();
        var ddl_menu1 = GetLoadApptUpdate($(this).val());
        $("menu_update").empty();
        $('#menu_update').select2({
            placeholder: "--Select Menu--",
            data: ddl_menu1,
            dropdownParent: $(this).parent()
        });
    });
});

function GetLoadApptUpdate(id) {
    var b = [];
    $.ajax({
        type: "GET",
        dataType: "json",
        cache: true,
        async: false,
        url: "/admin/menu/item/entry1/"+id,
        success: function (response) {
            b = response;
        },
        error: function (response) {
            b = { id: 0, text: "No Data" }
        }
    });
    return b;
};

#menu_category_update The function that is being called with this ID is working properly. But my problem is that when I click on the edit button, a dropdown is selected by default, for which the dependent dropdown is not selected.

Expected answer:

Answer

Here is the solution:

$('#menu_category_update').val(menu_item_category_selected);
    modal.find('.modal-body #menu_update').val(menu_item_selected);

    var menu_category_update_val = $("#menu_category_update option:selected").val();
    var menu_update_val = $("#menu_update option:selected").val();
    if (menu_category_update_val !== "") {
        func();
        $('#menu_update').val(menuItemSelected).trigger('change');
    }

function func() {
    $('#menu_category_update').change(function () {
        $("#menu_update").empty();
        var ddl_menu1 = GetLoadApptUpdate1($(this).val());
        $('#menu_update').select2({
            placeholder: "--Select Menu--",
            data: ddl_menu1,
            dropdownParent: $(this).parent()
        });
    }).change();

    function GetLoadApptUpdate1(id) {
        var b = [];
        $.ajax({
            type: "GET",
            dataType: "json",
            cache: true,
            async: false,
            url: "/admin/menu/item/entry1/" + id,
            success: function (response) {
                b = response;
            },
            error: function (response) {
                b = {id: 0, text: "No Data"}
            }
        });
        return b;
    };
}