从XML填充下拉列表-代码执行顺序错误

Question

I am trying to populate a drop down box from an XML file using jQuery. When the code is ran it appears to execute in order.

jQuery:

  $("#filterButton").click(function() {
    var dropdown = new Array();
    $.get('../restaurants.xml', function (xmlFile) {
      $(xmlFile).find('restaurant').each(function () {
        var found = false;
        var $restaurant  = $(this);
        var type = $restaurant.attr("type");

        dropdown.forEach(function(arrayValue){
          if(arrayValue == type){
            found = true;
          }
        });
        if(found == false){
          dropdown.push(type);
        }
      });
    });
    $('#potentialRestaruants').append('<select>');
      dropdown.forEach(function(arrayValue){
        $('#potentialRestaruants').append('<option value="' + arrayValue + '">' + arrayValue + '</option>' );
      });
      $('#potentialRestaruants').append('</select>'); 
  });

However the code is being run in this order:

  $("#filterButton").click(function() {
    var dropdown = new Array();

then

$('#potentialRestaruants').append('<select>');
      dropdown.forEach(function(arrayValue){
        $('#potentialRestaruants').append('<option value="' + arrayValue + '">' + arrayValue + '</option>' );
      });
      $('#potentialRestaruants').append('</select>'); 
  });

then

$.get('../restaurants.xml', function (xmlFile) {
  $(xmlFile).find('restaurant').each(function () {
    var found = false;
    var $restaurant  = $(this);
    var type = $restaurant.attr("type");

    dropdown.forEach(function(arrayValue){
      if(arrayValue == type){
        found = true;
      }
    });
    if(found == false){
      dropdown.push(type);
    }
  });
});

Why is the code being ran in this order and how can I get to run in the order I need?

Answer 1

It is being run in the order you describe because the $.get executes asynchronously. So any code that is dependent on the successful execution of the $.get function should also be included at the end of that function Ie the append and second forEach.