当用户通过下拉菜单（`
在 Web 表单开发中，实现“选中即填充”（如根据产品编号自动补全数量、单价、折扣等字段）是常见需求。但许多开发者会误用事件监听方式——例如为 zuojiankuohaophpcnselect> 元素绑定 onkeyup，这在实际操作中完全无效，因为下拉框不触发键盘释放事件；只有 onchange（选项变更后失去焦点或显式提交时）才可靠响应用户选择。
✅ 正确做法：统一使用 onchange + 精准 DOM 定位
首先，确保 HTML 结构语义正确：<tr> 必须包裹在 <table> 内，且整个表格应位于 <form> 中（否则部分浏览器可能解析异常）。同时，移除 <select> 上冗余的 onkeyup，仅保留 onchange：
<form method="POST" action="invoice.php">
<table>
<tr id="TRow" class="d-none">
<td>
<select class="scode form-control text-end" name="scode[]" id="user_id"
onchange="GetDetail(this.closest('tr'))">
<option value="0">Select Gender</option>
<?php
include('db.php');
$sql = mysqli_query($con, "SELECT * FROM machine1");
while($row = mysqli_fetch_array($sql)) {
echo '<option value="'.$row['user_id'].'">'.$row['user_id'].'</option>';
}
?>
</select>
</td>
<td><input type="text" class="qty form-control text-end" name="qty[]" onchange="Calc(this);"></td>
<td><input type="text" class="price1 form-control text-end" name="price[]" onchange="Calc(this);"></td>
<td><input type="text" class="discunt form-control text-end" name="discunt[]" onchange="Calc(this);"></td>
</tr>
</table>
</form>⚠️ 注意：PHP 循环中 echo '<option value="'.$row[''].'">...' 存在语法错误，应改为 $row['user_id']（假设字段名为 user_id），否则将输出空值或报错。
? JavaScript 逻辑关键修复点
- onchange 是唯一可靠事件：<select> 的值变更必须监听 change，而非 keyup/keydown。
- 类名严格匹配：原 JS 中 row.querySelector(".price") 查找的是 .price 类，但 HTML 中对应输入框的 class 是 price1 → 必须同步为 .price1。
- 避免作用域混乱：建议显式声明 row 变量（如 const currentRow = row），提升可读性与调试性。
- AJAX 响应处理需健壮：确保后端 gfg.php 返回合法 JSON（如 ["10", "299.99", "5"]），且前端解析前校验 myObj 类型。
修复后的完整 JS 示例：
function GetDetail(row) {
const currentRow = row;
const selectEl = currentRow.querySelector(".scode");
const selectedValue = selectEl.value;
// 清空逻辑（选中“默认项”时）
if (selectedValue === "0" || selectedValue.trim() === "") {
currentRow.querySelector(".qty").value = "";
currentRow.querySelector(".price1").value = "";
currentRow.querySelector(".discunt").value = "";
return;
}
// 发起 AJAX 请求（生产环境建议使用 fetch API）
const xhr = new XMLHttpRequest();
xhr.open("GET", "gfg.php?user_id=" + encodeURIComponent(selectedValue), true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
const data = JSON.parse(xhr.responseText);
// 确保返回数组长度足够，防止索引越界
currentRow.querySelector(".qty").value = data[0] || "";
currentRow.querySelector(".price1").value = data[1] || "";
currentRow.querySelector(".discunt").value = data[2] || "";
} catch (e) {
console.error("JSON parse failed:", e, xhr.responseText);
}
} else {
console.warn("AJAX request failed:", xhr.status);
}
}
};
xhr.send();
}? 额外建议（进阶优化）
- ✅ 使用 fetch() 替代 XMLHttpRequest：更简洁、支持 Promise 和 async/await；
- ✅ 添加加载状态：如禁用下拉框 + 显示 loading 提示，防止重复提交；
- ✅ 服务端校验：gfg.php 需对 $_GET['user_id'] 进行 SQL 防注入处理（推荐 PDO 预处理）；
- ✅ 支持多行动态表格：若页面含多个 TRow，确保每行 id 唯一或改用 data-row-id 属性管理。
遵循以上规范，即可彻底解决“下拉选择后自动填充不生效”的问题，保障表单交互的稳定性与用户体验一致性。
