jQuery将选项附加到选择元素，然后将它们取回答案

【问题标题】：jQuery appending option to a select element, and then getting them backjQuery将选项附加到选择元素，然后将它们取回
【发布时间】：2016-07-07 05:49:59
【问题描述】：

不知道“范围界定”是否真的是正确的术语，但我想知道是否有人可以解释为什么这不像我预期的那样工作。

https://jsfiddle.net/jmillsy/uucf5xmb/1/

如果我移动了

$('.myclass option').each(function() {
  $('#output').append($(this).val());
});

在 always() 块中，它的工作方式与我预期的一样。

【问题讨论】：

标签： jquery ajax select option

【解决方案1】：

这样使用它会起作用的：

$.ajax({
  type: "POST",
  url: "localhost:8080/404",
  dataType: 'json',
  data: {}
}).always(function(data) {

  $('.myclass').append(
    "<option value='op1'>Option 1</option>"
  );

  $('.myclass').append(
    "<option value='op2'>Option 2</option>"
  );
}).complete(function() {
  $('.myclass option').each(function() {
    $('#output').append($(this).val());
  });
});

问题是你的代码没有像你想象的那样运行，当你每次都这样做时，选项还没有呈现

更新

也适用于异步的其他版本，是的:)

【讨论】：

【解决方案2】：

问题在于您的 Ajax 调用是异步的。这意味着调用之后的代码会在调用之后立即执行，因此在您的选择中没有任何选项之前。

您可以通过在 ajax 选项中将选项 async 指定为 false 来更改此设置。这样，option 将被附加，然后在您的 output 块中列出它们的代码将被执行。

【讨论】：

确实如此！完全有道理。谢谢