How to select option from second select after it loads with javascript?

As per my understanding, you dont want user to select state until the state's are getting loaded. After loading only user should be able to select the state.

And I am assuming you are using AJAX to load the State.

If this is the issue :

you can use loading image, which will be displayed until the success has not been return and data has not been map to element.

In this case you can use below sample code :

function getData(p){
    .......
    $('#loadingmessage').show();  // show the loading message.
    $.ajax({
    url: "loadData.php?id=<? echo $id; ?>",
    type: "POST",
    cache: false,
    data: "&page="+ page,
    success : function(html){
        $(".content").html(html);
        $('#loadingmessage').hide(); // hide the loading message
    }
});

I believe a Promise is what you need. It will allow you exactly

to just know when the second select finishes loading when the load is in a separate function

$('#country').change(function() {
    $("#stp").empty().append("<option>...</option>");
    loadStates($(this).val())
        .then(states => $("#stp")
            .empty()
            .append(states.reduce((acc, cur) => acc + `<option>${cur}</option>`, "")));
});


$('#country').change();

function loadStates(country) {
    console.log(`Loading states for country: ${country}...`); 
    //setTimeout here just emulates your long loading process
    return new Promise((res, rej) => setTimeout(() => {
            console.log(`States for country: ${country} are loaded!`); 
            res(["state1", "state2", "state3"]);
        }, 3000));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
   <option>US</option>
   <option>UK</option>
   <option>RU</option>
</select>

<select id="stp">
</select>

For your actual use case you would write something like:

return new Promise((resolve, reject) => {
    var states = yourLoadingFunction();
    resolve(states);
});

UPDATE: Given your latest example, I think I understand your problem now. I suggest you to put your loading code into a separate function, for example:

function countryChanged(e, callback) {    
    var st="";
    var addrType="S";
    var loadObj=$('#shipstp');
    if( $(this).attr("id") == 'b_country'){
      loadObj=$('#billstp');
      addrType="B";
    }
    loadObj.prop("disabled", true);
    // this data is passed during the trigger() code
    if( typeof(e.st) != 'undefined'){st=e.st;console.log(5)}
    uObj={c:$(this).val(),nc:Math.random(),t:addrType,p:st};
    uParam=$.param(uObj);
    loadObj.load('/stubs/state-n-province.cfm', uParam, function() {
        // when the loading is complete, we enable the second select and 
        // call the callback function
        loadObj.prop("disabled", false);
        if (callback) callback();
    });
}

Note that jQuery .load() method has a third argument which is a callback function that will be called when the loading is complete.

Then you can use this function in two ways:

1) when the user changes the country:

$('#s_country,#b_country').change(countryChanged);

2) in your setFormwithDF() function:

function setFormwithDF(){
    d={};
    // data from dialog
    d.address=$('#oaddress').text();
    d.city=$('#ocity').text();
    d.state=$('#ostate').text();
    d.zip=$('#ozip').text();
    d.country=$('#ocountry').text();

    $('#s_country option[value='+d.country+']').prop('selected', 'selected');
    //instead of calling .trigger('change') just call countryChanged function
    countryChanged({st: "whatever you pass during the trigger() code"}, function() {
       //this will happen only after .load() is complete
        $('#s_st option[value='+d.state+']').prop('selected', 'selected');
    });
    $('#s_addr1').val(d.address).change();
    $('#s_addr2').val('').change();
    $('#s_city').val(d.city).change();
    $('#s_zip').val(d.zip);
    $('#s_phone').val($('#dfsearch').val());
    $( "#dfsearchdialog" ).dialog('close');
}