how to load dynamic dependent dropdown in form load?

I implemented a dynamic drop-down menu and once the the user select an item it'll load the subcategories under the selected item underneath of drop-down menu. That all happens in my "add details" page. But, when it comes to the edit page I want to show both of the previously selected item from the drop-down and subcategory items underneath the drop-down. This is the JQuery that I'm using for the property on change in the "add details" page.

$(document).ready(function() {
    $("#parent_cat").change(function() {
        $(this).after('<div id="loader" style="position:inline;"><img src="../device manager/img/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat_edit.php?parent_cat=' + $(this).val() + '&branchId=' + <?php echo json_encode($user_ID); ?>, function(data) {
            $("#sub_cat").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });
});

I want to load this JQuery when the form load.

Any solution would be great. Thanks in advanced.

Didn't check the code if it works or not but main idea is to trigger your subcategory loading code part both on page load (in this case when it's editing) and on dropdown change

var userid = <?php echo json_encode($user_ID); ?>;
function loadsubcategory(obj) {
    obj.after('<div id="loader" style="position:inline;"><img src="../device manager/img/loading.gif" alt="loading subcategory" /></div>');
    $.get('loadsubcat_edit.php?parent_cat=' + obj.val() + '&branchId=' + userid, function(data) {
        $("#sub_cat").html(data);
        $('#loader').slideUp(200, function() {
            $(this).remove();
        });
    }); 
}
$(document).ready(function() {
    $("#parent_cat").change(function() {
        loadsubcategory($(this));
    });
    loadsubcategory($("#parent_cat"));
});