本文详解如何在 laravel 8 表单中，通过 select 下拉框联动填充金额字段，并在用户重新选择“请选择”选项时，将关联的只读金额输入框重置为 0，避免残留值问题。
本文详解如何在 laravel 8 表单中，通过 select 下拉框联动填充金额字段，并在用户重新选择“请选择”选项时，将关联的只读金额输入框重置为 0，避免残留值问题。
在 Laravel 8 表单开发中，常需实现「下拉选择 → 自动填充对应金额」的交互逻辑（如航线选择后自动填入运费）。但一个易被忽略的细节是：当用户再次选择占位选项（如 <option value="">Cari Rute Pelayaran</option>）时，金额字段应主动清空并设为 0，而非保留上一次的值。当前代码的问题在于：AJAX 仅在 response !== null 时更新输入框，而当用户选空值（id = ''）时，AJAX 不触发（因 url.replace(':id', '') 导致路由无效），且未处理空选择场景。
✅ 正确解决方案
需同时优化 前端逻辑判断 和 后端健壮性：
1. 前端：增强 change 事件处理逻辑
$('#biaya_pelayaran_id').change(function() {
var id = $(this).val();
$('#biaya_kapal').val('0'); // 默认先置为 0（覆盖残留值）
// 仅当有有效 ID 时发起请求
if (id) {
var url = '{{ route('getBiayaPelayaran', ':id') }}'.replace(':id', id);
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function(response) {
if (response && response.biaya_pelayaran !== undefined) {
$('#biaya_kapal').val(response.biaya_pelayaran);
}
},
error: function() {
// 请求失败时保持 0，确保数据一致性
$('#biaya_kapal').val('0');
}
});
}
});? 关键改进：
- 始终先重置为 '0'（字符串形式兼容 input[type="number"]），确保空选择或异常时字段归零；
- 仅对非空 id 发起 AJAX，避免无效请求；
- 添加 error 回调兜底，提升鲁棒性。
2. 后端：完善控制器，支持空/无效 ID 安全返回
public function getBiayaPelayaran($id = null)
{
// 若 ID 为空、非数字或记录不存在，返回默认结构
if (!$id || !is_numeric($id)) {
return response()->json(['biaya_pelayaran' => 0]);
}
$data = BiayaPelayaran::find($id);
if (!$data) {
return response()->json(['biaya_pelayaran' => 0]);
}
return response()->json([
'biaya_pelayaran' => $data->biaya_pelayaran
]);
}⚠️ 注意：原代码使用 echo json_encode(...) 易导致响应头错误，应统一使用 Laravel 的 response()->json()。
3. 视图优化（可选但推荐）
为语义清晰，建议将占位选项的 value 显式设为 0，并与后端逻辑对齐：
<option value="0">Cari Rute Pelayaran</option>
同时在 JS 中将 if (id) 改为 if (id && id != '0')，使意图更明确。
? 总结
- 核心原则：UI 状态应由 JS 主动控制，而非依赖后端响应来“修正”；
- 空值处理 必须前置（如 $('#biaya_kapal').val('0')），不可依赖条件分支覆盖；
- 后端需防御性编程，对非法参数返回安全默认值；
- 避免直接操作 DOM 值而不校验（如 response.biaya_pelayaran 可能为 null）。
通过以上调整，即可实现：选择航线 → 填入对应金额；选择“Cari Rute Pelayaran” → 立即重置为 0，彻底解决数据残留问题。
