Jquery Dependent Dropdown to load on document ready Help

Hello I have a depdent dropdown for country sate and city and i want to load states and cities based on country on document ready function i tried to put document.ready (function())

but nothing works please update me how can i use this

my code is here

function showState(sel) {
    var country_id = sel.options[sel.selectedIndex].value; 
    $("#output1").html( "" );
    $("#output2").html( "" );
    if (country_id.length > 0 ) {
       
     $.ajax({
            type: "POST",
            url: "fetch_channel.php",
            data: "country_id="+country_id,
            cache: false,
            beforeSend: function () {
                $('#output1').html('<img src="images/loading.gif">');
            },
            success: function(html) {   
                $("#output1").html( html );
            }
        });
    }
}

function showCity(sel) {
    var state_id = sel.options[sel.selectedIndex].value; 
    if (state_id.length > 0 ) {
     $.ajax({
            type: "POST",
            url: "fetch_drama.php",
            data: "state_id="+state_id,
            cache: false,
            beforeSend: function () {
                $('#output2').html('<img src="images/loading.gif">');
            },
            success: function(html) {   
                $("#output2").html( html );
            }
        });
    } else {
        $("#output2").html( "" );
    }
}

Code (JavaScript):

 

Try putting breakpoint in page which is called by Jquery ajax function and see if breakpoint is reaching or not.