Laravel 8 下拉选择自动填充空选项时费用字段重置为0

云上老周

2026-9-3

Laravel 8 下拉联动选择空选项时自动填充0修复方案

问题根因

选中下拉框默认空选项时，获取到的选项值为空字符串：

发起Ajax请求后，后端BiayaPelayaran::find(空值)会返回null
原有前端逻辑仅在接口返回值不为null时才更新输入框内容，因此空选项场景下不会触发字段更新，输入框会保留上一次选中航线时填充的费用值

修复步骤

1. 优化前端JavaScript逻辑（优先推荐）

选中空选项时直接重置字段，无需发起无效的Ajax请求，同时增加接口返回空值的兜底逻辑，修改后代码如下：

$('#biaya_pelayaran_id').change(function() {
    var id = $(this).val();
    // 选中默认空选项时直接重置费用为0，终止后续请求
    if (!id) {
        $('#biaya_kapal').val(0);
        return;
    }
    var url = '{{ route('getBiayaPelayaran', ':id') }}';
    url = url.replace(':id', id);
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        success: function(response) {
            if (response !== null) {
                $('#biaya_kapal').val(response.biaya_pelayaran);
            } else {
                // 接口查询不到数据时兜底重置为0
                $('#biaya_kapal').val(0);
            }
        }
    });
});

2. 后端接口兼容优化（可选，增强鲁棒性）

调整控制器方法，对空id、查询不到数据的场景做统一返回，避免前端异常：

public function getBiayaPelayaran($id = 0)
{
    // 空id场景直接返回费用0
    if (empty($id)) {
        return response()->json(['biaya_pelayaran' => 0]);
    }
    $data = BiayaPelayaran::find($id);
    // 航线不存在时兜底返回0
    if (!$data) {
        return response()->json(['biaya_pelayaran' => 0]);
    }
    return response()->json($data);
}