jQuery val()不能处理通过ajax附加的选项

jQuery val() not working on option appended through ajax

本文关键字：ajax 选项 val 不能 处理 jQuery      更新时间：2023-09-26

我有一个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>

现在我想在调用addOption() -

后使用.val()设置selected option
$('#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');
});

是否有一个原因，为什么我的选项(s)附加在.ajax函数不能选择使用.val()，把它可以，如果我直接附加它们?

这是因为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');
  });
});

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

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

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

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

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

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

1)您应该将$('#dropdownB').val('bookB');放在AJAX调用的success-event中，因为AJAX是异步的，当您尝试更改所选项目时，您的请求可能未完成，因此没有项目可选择。
2)添加到#books，但更改#dropdownB的选定项。这是两个不同的id，因此也是两个不同的DOM元素。

相关文章：