Question

我有一个jQuery / Ajax函数，它将2 <option>附加到<select>。

function addOption() {  
    var author = $("#authors").val();
    $('#books').empty(); 
    $('#books').html('<option value="">Please Select</option>'); 
$.ajax({ 
      type: "post", 
      url:  "books.php", 
      data: { author:author }, 
      success: function(response){ 
          $('#books').append(response); 
      } 
    }); 
}

response以 -

的形式返回

<option value="bookA">Book A</option>
<option value="bookB">Book B</option>

现在books是 -

<select id="books">
<option value="">Please Select</option>
<option value="bookA">Book A</option>
<option value="bookB">Book B</option>
</select>

这很有效。

现在我想在调用selected后使用option设置.val() addOption() -

$('#authors').change( function(){
addOption();
$('#books').val('bookB');
});

这不会选择Book B。

如果我硬编码.append()它有效 -

function addOption() {  
    var author = $("#author").val();
    $('#books').empty(); 
    $('#books').html('<option value="">Please Select</option>');
    $('#books').append('<option value="bookA">Book A</option>\n<option value="bookB">Book B</option>);
}

$('#authors').change( function(){
addOption();
$('#books').val('bookB');
});

是否有理由不能使用.ajax选择.val()函数中附加的选项，如果我直接附加它，可以将其添加？

Answer 1

Ajax是异步的，当您设置该值时，没有该值的选项，您可以将代码放入成功回调中。

  success: function(response){ 
      $('#books').append(response); 
      // ...
  }

或者将您的Ajax请求的async属性值设置为false;

Answer 2

A JAX是异步，这意味着当你调用addOption（）方法时，它可能（并且可能会）在实际进行Ajax调用之前返回，因此，在触发Ajax回调以附加选项之前，您正在调用$('#dropdownB').val('bookB');。

尝试将$('#dropdownB').val('bookB');放入ajax调用的成功回调中，您应该看到它正常工作。

Answer 3

那是因为AJAX调用是异步的，所以当你尝试选择这些选项时，它还没有被添加到选择中。

在函数中使用回调，以便在响应到达时执行某些操作：

function addOption(callback) {  
  var author = $("#authors").val();
  $('#books').empty(); 
  $('#books').html('<option value="">Please Select</option>'); 
  $.ajax({ 
    type: "post", 
    url:  "books.php", 
    data: { author:author }, 
    success: function(response){ 
      $('#books').append(response); 
      callback();
    }
  }); 
}

用法：

$('#authors').change( function(){
  addOption(function(){
    $('#dropdownB').val('bookB');
  });
});

Answer 4

这是因为ajax是异步。也就是说，当它返回并将新选项附加到选择列表时，浏览器引擎已经继续并尝试设置该值（尚未添加）。尝试移动值设置逻辑以作为ajax响应的一部分。

Answer 5

1）你应该将$('#dropdownB').val('bookB');置于ajax调用的成功事件中，因为AJAX是异步的，当你尝试更改所选项时你的请求可能无法完成，因此没有项目可以选择。
2）您追加#books，但更改#dropdownB的所选项目。这是两个不同的ID，因此有两个不同的DOM元素。

jQuery val（）没有处理通过ajax追加的选项

5 个答案: