jQuery下拉框切换时返回值始终不变，请求排查问题

我有如下下拉框：

<form action="" id="myForm" method="post">
<select id="choose">
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
</select>

我使用以下脚本调用另一个页面，并将数据加载到id为update的div中：

<div id="update"></div>

$(document).ready(function () {
  var datum = $('#choose option:selected').text();
  $("#choose").on("change", function () {
        $("#update").load("boekingstap0_inlay.php?zipcodeFrom=<?php echo $_POST['zipcodeFrom']; ?>&date="+datum);
  });
});

当我切换下拉框选项时，返回的date值始终为“test1”。页面确实会重载，我在被加载的页面中添加了Alert弹窗，用于输出$_GET['date']的值，结果一直是test1。请问我哪里操作错误了？

问题出在datum变量的定义位置：你把它放在了change事件外部，页面初始化时只会获取一次默认选中项（Test1）的文本，之后切换下拉框时，这个变量不会重新更新，所以每次传递的都是初始值test1。

只需要把datum的获取逻辑移到change事件内部，让每次下拉框切换时都重新获取当前选中项的文本即可：

$(document).ready(function () {
  $("#choose").on("change", function () {
    // 每次切换时重新获取当前选中项的文本
    var datum = $('#choose option:selected').text();
    // 也可以用更简洁的写法，利用当前触发事件的元素获取：
    // var datum = $(this).find("option:selected").text();
    $("#update").load("boekingstap0_inlay.php?zipcodeFrom=<?php echo $_POST['zipcodeFrom']; ?>&date=" + datum);
  });
});

修改后，切换下拉框选项时，传递给后端的date参数就会跟着选中项的文本同步变化了。

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