确定ajax调用已完成以运行另一个ajax调用

Question

In my project I have some select option group which load ajax data depending on previous value. Now I am having problem when I am trying to copy them to another select option group.

here is the scenario

parmanet address              Present Address
Division                      Division    
District                      District
Upzilla                       Upzilla
Union                         Union  

All of them are select field and after select each field next select option loaded by ajax. I put a checkbox and when user click the checkbox, parmanent address data should copy to present address with all the ajax call.

Now The problem is, the jquery "val" function not working because it runs before the data loaded from ajax. If I put delay to 100 ms, it working, but It's not a proper way. Is there any better way to solve this problem??

This is my code when i change division to load ajax data to division, and other option is same as like this.

$('#divisions').change(function() {
    $("#villtable").hide();
    $("#villaddform").hide();
    $.ajax({
      type: 'post',
      url: 'GetDistricts',
      data: {
        get_option:this.value
      },
      success: function(response) {
        document.getElementById("districts").innerHTML=response;
      }
    });
  });

And this is what i tried to copy data to present address group...

$.when( $('.division-prese').val(divi).trigger('change').delay( 100 ) ).then(function() {
    $.when( $('.district-prese').val(dist).trigger('change').delay( 100 ) ).then(function() {
        $.when( $('.upazilla-prese').val(upaz).trigger('change').delay( 100 ) ).then(function() {
                        $('.union-prese').val(unio).trigger('change');
        });   
    });
});

i also tried 'done', but still not working.

Answer 1

General idea of extracting the logic and using it in two places, one of which performing the promise chaining.

function loadDistricts ($divisions) {
    return $.ajax({
        type: 'post',
        url: 'GetDistricts',
        data: {
          get_option: $divisions.val()
        },
        success: function(response) {
            $('#districts').html(response);
        }
      });
}

//... other methods

var $divisions = $('#divisions');
var $districts = $('#districts');
var $upazillas = $('#upazillas');

$divisions.change(function() {
    $("#villtable").hide();
    $("#villaddform").hide();
    loadDistricts($divisions);
});

//... other change methods

$('.division-prese').val(divi);

loadDistricts($divisions).then(function(){
    $('.district-prese').val(dist);

    loadUpazillas($upazillas).then(function(){
        $('.upazilla-prese').val(upaz);

        //call next thing
    });
});

</div>