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

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

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

response回来 –

 Book A Book B 

现在的books是 –

  Please Select Book A Book B  

这很好用。

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

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

这不会使Book B被选中。

如果我硬编码.append()它的工作原理 –

 function addOption() { var author = $("#author").val(); $('#books').empty(); $('#books').html('Please Select'); $('#books').append('Book A\nBook B); } $('#authors').change( function(){ addOption(); $('#books').val('bookB'); }); 

是否有理由不能使用.val()选择附加在.ajax函数中的选项，如果我直接附加它可以把它放进去吗？

Answer 1

这是因为AJAX调用是异步的，因此当您尝试选择选项时，它尚未添加到选择中。

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

 function addOption(callback) { var author = $("#authors").val(); $('#books').empty(); $('#books').html('Please Select'); $.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 2

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

试着把$('#dropdownB').val('bookB'); 进入ajax调用的成功回调，你应该看到它工作。

Answer 3

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

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

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

Answer 4

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

Answer 5

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