jQuery val()不适用于通过Ajax附加的选项 [英] jQuery val() not working on option appended through ajax

问题描述

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

I have a jQuery/Ajax function that is appending 2 <option>s to a <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()-

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

这不会选择Book B.

如果我对.append()进行硬编码，则可以正常工作-

If I hard code the .append() it works -

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');
});

是否存在无法使用.val()选择添加在.ajax函数中的选项的原因，如果我直接附加它们，可以放置吗?

Is there a reason why my option(s) appended in the .ajax function cannot be selected using .val(), put it can if I append them directly?

推荐答案

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

That's because the AJAX call is asynchronous, so when you try to select the options, it hasn't been added to the select yet.

在函数中使用回调，以便您可以在响应到达后执行一些操作:

Use a callback in the function, so that you can do something when the response has arrived:

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');
  });
});

这篇关于jQuery val()不适用于通过Ajax附加的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！