PHP/Javascript ajax 调用 - 在 onchange 函数之前获取旧数据

Question

我有一个选择输入字段，我有一个onchange函数。该表显示所选值上的值，如果未选择任何内容，则应显示所有数据。我想知道是否可以在更改发生之前获取该选择字段的值？因此，更改之前的值。

我在网上看了看，但没有任何帮助。

这是我当前的代码：

.HTML

<form action="#" method="get">
<div class="form-group" style="max-width: 300px; width: 98%;">
<select name="status" id="status" class="form-control" onchange="getProjectsByStatus(this.value)">
<option value="">Select a status</option>
<?php foreach ($status as $stat) { ?>
<option value="<?php echo $stat['status_id']; ?>"><?php echo $stat['status']; ?></option>
<?php } ?>
</select>
</div>
</form>

Javasscript

function getProjectByStatus(value) {
var current = document.getElementById('project-status').value;
if (value == "") {
document.getElementById('project-status').innerText = this.current;
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('project-status').innerHTML = this.responseText;
}
};
xmlhttp.open('GET', 'getProjectsByStatus.php?status='+value, true);
xmlhttp.send();
}
}

Answer 1

我建议不要使用像"onchange"这样的html属性。这些属性使用的函数必须位于全局命名空间中。 这种情况应该被防止。相反，您应该从 JavaScript 代码中注册事件。以下示例使用 jquery。 如果您使用vanilla js或其他框架，代码会有所不同。

$(function() {
var $status = $('#status');
var previousValue = $status.val();
$status.change(function() {
var newValue = $status.val();
// here your logic
});
});

使用这种方法，您可以存储输入的初始状态，并在选择字段的值发生更改时访问它。此外，还可以阻止应用写入全局命名空间。