AJAX加载select选项后，jQuery获取其值返回null的解决方法

这问题我之前也碰到过，核心原因就是AJAX的异步特性在搞鬼！你调用$("#operator").load('select.php')时，浏览器会发起异步请求去拉取选项数据，它不会等着请求完成，而是直接执行后面的代码——这时候<select>里还没有任何加载好的选项，$("#operator").val()自然返回null。

正确的解决方案：使用load()的回调函数 #

load()方法支持传入一个回调函数，这个函数会在AJAX请求完成（不管成功还是失败）、选项已经插入到DOM之后才执行。把获取值的逻辑放在这个回调里，就能确保拿到正确的结果：

<select id="operator">
</select>

<script>
// 调用load并传入回调函数
$("#operator").load('select.php', function() {
  // 这部分代码会在选项加载完成后执行
  var operator = $("#operator").val();
  alert(operator);
});
</script>

为什么之前的写法没用？ #

你尝试的$(document).ready()或者$(function(){...})，只是确保DOM结构加载完成，但它们管不了AJAX请求的进度。DOM加载完了，但服务器的选项数据还没回来，<select>里是空的，所以val()拿不到值。

进阶：处理请求失败的情况 #

如果需要对AJAX请求失败的情况做处理，可以在回调函数里判断请求状态：

$("#operator").load('select.php', function(response, status, xhr) {
  if (status === "success") {
    var operator = $("#operator").val();
    alert(operator);
  } else {
    alert('加载选项失败：' + xhr.statusText);
  }
});

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