本文详解如何在 laravel 8 中通过 ajax 动态响应下拉框（select）的选择与取消操作：当选中有效航线时自动填充运费金额，当重新选中“cari rute pelayaran”（空选项）时将费用字段重置为 0，确保表单状态始终准确、用户体验一致。
本文详解如何在 laravel 8 中通过 ajax 动态响应下拉框（select）的选择与取消操作：当选中有效航线时自动填充运费金额，当重新选中“cari rute pelayaran”（空选项）时将费用字段重置为 0，确保表单状态始终准确、用户体验一致。
在实际业务场景中，用户需从航线列表中选择运输路线，系统应实时同步显示对应运费（如 Rute: Banjarmasin-Jakarta → Biaya: 1.750.000）。但当前逻辑存在一个关键缺陷：当用户主动切换回占位选项 时，#biaya_kapal 输入框未被重置，仍保留上一次的数值，导致数据不一致甚至提交错误。
根本原因在于原始 JavaScript 监听器仅在 change 事件触发时发起 AJAX 请求，而当 value 为空字符串（""）时，route('getBiayaPelayaran', ':id') 会生成类似 /api/biaya-pelayaran/ 的 URL（ID 为空），后端 BiayaPelayaran::find($id) 在 $id = null 或 0 时返回 null，但前端 success 回调中未处理该情况，导致输入框值保持不变。
✅ 正确做法是在 change 事件中显式判断选中值，并统一控制输入框状态，无需依赖后端返回空数据：
$('#biaya_pelayaran_id').change(function() {
const selectedValue = $(this).val();
const $biayaInput = $('#biaya_kapal');
// 若选中空选项（即占位符），直接设为 0 并退出
if (!selectedValue) {
$biayaInput.val(0);
return;
}
// 否则发起 AJAX 请求获取对应费用
const url = '{{ route('getBiayaPelayaran', ':id') }}'.replace(':id', selectedValue);
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
success: function(response) {
if (response && response.biaya_pelayaran !== undefined) {
$biayaInput.val(response.biaya_pelayaran);
} else {
$biayaInput.val(0); // 安全兜底：后端未返回有效数据时归零
}
},
error: function() {
$biayaInput.val(0); // 请求失败时也重置为 0，避免脏数据
console.warn('Failed to fetch shipping cost. Resetting to 0.');
}
});
});
同时，建议优化后端控制器以增强健壮性（避免 echo json_encode(null) 导致前端解析异常）：
// App\Http\Controllers\BiayaPelayaranController.php
public function getBiayaPelayaran($id)
{
if (!$id || !is_numeric($id)) {
return response()->json(['biaya_pelayaran' => 0], 200);
}
$data = BiayaPelayaran::find($id);
if (!$data) {
return response()->json(['biaya_pelayaran' => 0], 200);
}
return response()->json([
'biaya_pelayaran' => $data->biaya_pelayaran
]);
}
⚠️ 注意事项：
- 前端务必使用 !selectedValue（而非 selectedValue === ''）判断空选项，兼容 null/undefined；
- input[type="number"] 的 value="0" 是初始值，但 JS 中 .val(0) 和 .val('0') 均可生效，推荐统一用数字类型；
- 不要依赖 readonly 属性阻止用户手动修改——它仅防误操作，真实校验应在后端完成；
- 若项目已启用 Laravel Mix + ES6，建议将上述逻辑迁移至模块化 JS 文件，并使用 fetch() 替代 jQuery AJAX 提升可维护性。
通过以上改造，用户无论首次选择、切换航线，还是主动回到“Cari Rute Pelayaran”，费用字段均能精准响应：有效 ID → 显示对应金额；空值 → 立即归零，彻底解决状态不同步问题。
