基于JSON数组创建Select下拉选项无报错但失效，求故障排查

兄弟，我一眼就瞅出问题出在哪了——异步操作的执行顺序搞反了！你现在的代码里，getCurrencies() 里的 $.getJSON 是异步请求，它不会阻塞后续代码执行。所以你在 $(document).ready() 里先调用 getCurrencies()，紧接着就调用 createOptions()，这时候API请求还没完成，currencyList 还是空数组，自然没法生成下拉选项。

另外看你代码里的 currencyList.p...，应该是想写 currencyList.push() 吧？先把这个小细节补上。

修正后的完整代码 #

HTML部分（不变）

<select class="currencyList"></select>

JS部分（调整异步执行逻辑）

var currencyList = [];

$(document).ready(function() {
  // 先发起异步请求，请求完成后再创建选项
  getCurrencies();
});

function getCurrencies() {
  $.getJSON("http://api.nbp.pl/api/exchangerates/tables/a/?format=json", function(response) {
    // 正确填充currencyList数组
    $.each(response[0].rates, function(i, item) {
      // 假设你要存的是货币代码和名称，可根据实际需求调整结构
      currencyList.push({
        code: item.code,
        name: item.currency
      });
    });
    // 关键：请求成功并填充数组后，再调用创建选项的方法
    createOptions();
  })
  // 补充错误处理，方便排查请求失败的情况
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error("获取货币列表失败：", textStatus, errorThrown);
  });
}

function createOptions() {
  var $select = $(".currencyList");
  // 先清空原有选项（可选，避免重复添加）
  $select.empty();
  // 遍历数组生成选项
  $.each(currencyList, function(i, currency) {
    var $option = $("<option>").val(currency.code).text(`${currency.name} (${currency.code})`);
    $select.append($option);
  });
}

关键修改点 #

• 把 createOptions() 移到 $.getJSON 的成功回调里，确保只有当API请求完成、currencyList 被填充后才执行创建选项的逻辑。
• 补充了请求失败的错误处理，方便你排查API请求是否出问题。
• 完善了 currencyList 的填充逻辑（可根据实际需求调整存储的字段）。

额外建议 #

如果以后遇到异步相关的问题，记得先想清楚：异步操作不会等待，后续代码会立刻执行，必须把依赖异步结果的逻辑放到回调、Promise的then()或者async/await里。

内容的提问来源于stack exchange，提问作者DeWuKa