1

我有一个 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()，如果我直接附加它们可以吗？

4

5 回答 5

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');
  });
});
于 2013-01-01T23:04:03.893 回答
2

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

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

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

于 2013-01-01T23:01:42.280 回答
2

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

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

于 2013-01-01T23:01:54.373 回答
1

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

于 2013-01-01T23:01:39.503 回答
1

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

于 2013-01-01T23:05:36.280 回答