Question

我正在尝试使用jQuery从XML文件填充下拉框。代码运行时，它似乎按顺序执行。

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>'); 
  });

但是代码按此顺序运行：

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

然后

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

然后

$.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);
    }
  });
});

为什么代码按此顺序运行，如何按照我需要的顺序运行？

Answer 1

它按照您描述的顺序运行，因为$ .get以异步方式执行。因此，任何依赖于成功执行$ .get函数的代码也应该包含在该函数的末尾。附加和第二个forEach。

填充从XML下拉 - 代码以错误的顺序执行

1 个答案: