AJAX级联下拉更新后第二个下拉框选中值获取错误如何解决

问题原因 #

AJAX请求默认是异步执行的，你写在$.get()后面的代码不会等请求返回、下拉框内容更新完成再执行，而是在发送请求后立刻同步执行。此时第二个下拉框还没有被替换为新的option内容，所以两次alert拿到的都是更新前的旧值。

解决方案 #

把获取更新后选中值的逻辑放到$.get的请求成功回调函数里，回调会在你将新的option渲染到下拉框之后触发，此时拿到的值就是最新的选中值。

修正后的代码如下：

$('#table').on('change', '.category', function(){
  var $row = $(this).closest('tr');
  var categoryid = $row.find('.category option:selected').val()

  // 输出旧的食品选中值
  alert($row.find('.food option:selected').val());

  $.get('./include/ajax.php?category=' + categoryid, function(data) {
    $row.find('.food').html(data);
    // 下拉框内容更新完成后再获取新值
    alert($row.find('.food option:selected').val());
  })
});

可选优化 #

如果遇到部分浏览器替换option后选中状态未同步的问题，可以在渲染新option后手动指定选中值，保证取值正确：

$row.find('.food').html(data).val($row.find('.food option:first').val());

内容的提问来源于stack exchange，提问作者user3692048