Laravel 8 中实现下拉框选择后自动填充金额，且支持清空重置为 0-php教程-PHP中文网

Laravel 8 中实现下拉框选择后自动填充金额，且支持清空重置为 0

本文详解如何在 laravel 8 表单中，通过 ajax 动态填充“运费”字段：当用户选择有效航线时显示对应费用；当重新选择占位选项“cari rute pelayaran”（值为空）时，自动将金额字段重置为 0。

本文详解如何在 laravel 8 表单中，通过 ajax 动态填充“运费”字段：当用户选择有效航线时显示对应费用；当重新选择占位选项“cari rute pelayaran”（值为空）时，自动将金额字段重置为 0。

在实际业务场景中，表单常需根据下拉框（

原 JavaScript 仅在 response !== null 时赋值，但当 id 为空字符串（即用户选中）时，AJAX 请求仍会发送 url.replace(':id', '')，导致路由匹配失败或返回 null，此时 success 回调不执行，#biaya_kapal 保持上一次的值，无法重置。

✅ 正确做法是：无论是否选中有效 ID，均应在 change 事件中主动判断 id 值，并统一控制输入框状态。优化后的 JS 代码如下：

Laravel 13.2.0

PHP中文网提供Laravel 13.2.0版本下载，Laravel框架是基于 PHP 8.3+ 的高性能框架，官方推荐通过 Composer 安装。它内置 AI SDK、JSON:API Resources 及原生向量搜索，支持属性驱动开发与队列路由，大幅提升开发效率。相比旧版，13.2.0 优化了缓存 TTL 管理与实时通信，无需 Redis 即可横向扩展。作为现代 Web 开发首选，它兼顾安全与极速体验，助您快速构建企业级应用。

下载

$('#biaya_pelayaran_id').change(function() {
    var id = $(this).val();

    // 若未选择有效项（value 为空），直接设为 0 并退出
    if (!id) {
        $('#biaya_kapal').val(0);
        return;
    }

    // 否则发起 AJAX 请求获取运费
    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);
            } else {
                $('#biaya_kapal').val(0); // 数据异常时兜底为 0
            }
        },
        error: function() {
            $('#biaya_kapal').val(0); // 请求失败时也重置为 0
        }
    });
});

? 同时建议增强后端健壮性：当前控制器 getBiayaPelayaran($id = 0) 在 $id 为空时会调用 BiayaPelayaran::find(null)，返回 null，虽无报错但不够严谨。推荐改写为：

public function getBiayaPelayaran($id)
{
    // 显式拒绝空 ID 或非数字 ID
    if (empty($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
    ]);
}

⚠️ 注意事项：

HTML 中的 value="0" 是初始值，JS 中使用 .val(0) 可安全重置（无需字符串 '0'）；
避免使用 echo json_encode(...)，应始终使用 Laravel 的 response()->json() 保证 Content-Type 和状态码正确；
前端务必处理 error 回调，防止网络异常导致字段残留旧值；
若需格式化显示（如千分位），应在前端展示层处理（如 Intl.NumberFormat），而非存入 type="number" 输入框——该类型只接受纯数字。

通过以上改进，即可实现「选航线→填运费，选提示项→归零」的完整交互闭环，提升用户体验与数据一致性。