Ajax与Laravel 8：下拉选项切换时在数字输入框显示对应费用

问题 #

我在「添加新KPI发票」表单里，想根据<select name="SLATerm">的选项，动态修改只读<input type="number" name="SLACost">的值。数据库里有一张包含SLATerms、SLACost、SLADeduction字段的表，需要把数据拿到表单里用。

已经在控制器里写了fetchSLA方法，返回所有KPITerms的JSON数据：

/**
** KPI API
**/
public function fetchSLA()
{
    $kpiTerms = KPITerms::all();
    return response()->json([
        'SLATermData' => $kpiTerms, // SLATermData is the name that will be used in Ajax.
    ]);
}

并在web.php配置了路由：

Route::get('kpi/fetch/sla', 'fetchSLA')->name('kpi.fetchSLA'); // The API for fetching SLA as json

然后写了GET类型的Ajax请求：

function fetchSLA() {
        $.ajax({
            type: 'GET',
            url: "/management/kpi/fetch/sla",
            dataType: 'json',
            success: function (response) {
                // console.log(response.SLATermData);
                $("select[name='SLATerm']").change(function() {
                    $("input[name='SLACost']").val(response.SLATermData);
                });
            }
        });
    }

显然SLATermData返回的是全部JSON数据，输入框显示[object object]。我改成下面这样也不行：

$("select[name='SLATerm']").change(function() {
    $("input[name='SLACost']").val(response.SLATermData.SLACost);
});

请问哪里错了？

解决方案 #

你现在的问题核心有两个：

1. response.SLATermData是数组而非单个对象：控制器返回的KPITerms::all()是多条记录的集合，转成JSON后是数组，不是单个对象，直接取.SLACost自然找不到对应值。
2. 没有根据选中选项匹配对应数据：你没获取下拉框选中的SLATerm值，也没从返回的数组里筛选出匹配的记录。

修复步骤 #

1. 确保下拉框选项的value对应SLATerm字段值

先保证<select name="SLATerm">的每个选项value和数据库里的SLATerms字段值一致，比如后端渲染的话可以这么写：

<select name="SLATerm">
    @foreach($kpiTerms as $term)
        <option value="{{ $term->SLATerms }}">{{ $term->SLATerms }}</option>
    @endforeach
</select>

2. 修改Ajax的change事件逻辑

在change事件里，先获取选中的SLATerm值，再从返回的数组里找到匹配记录，最后取出对应SLACost赋值给输入框：

function fetchSLA() {
    $.ajax({
        type: 'GET',
        url: "/management/kpi/fetch/sla",
        dataType: 'json',
        success: function (response) {
            const slaData = response.SLATermData;
            
            $("select[name='SLATerm']").change(function() {
                // 获取当前选中的SLATerm值
                const selectedTerm = $(this).val();
                // 从数组中筛选匹配的记录
                const matchedItem = slaData.find(item => item.SLATerms === selectedTerm);
                
                // 找到就赋值，没找到就清空
                if (matchedItem) {
                    $("input[name='SLACost']").val(matchedItem.SLACost);
                } else {
                    $("input[name='SLACost']").val('');
                }
            });

            // 可选：页面加载时如果有默认选中项，自动触发一次change事件
            $("select[name='SLATerm']").trigger('change');
        }
    });
}

额外优化建议 #

可以在控制器返回数据时，把SLATerms作为键、SLACost作为值，这样前端匹配更高效：

public function fetchSLA()
{
    $kpiTerms = KPITerms::all()->pluck('SLACost', 'SLATerms');
    return response()->json([
        'SLATermData' => $kpiTerms,
    ]);
}

此时前端代码可以简化为：

function fetchSLA() {
    $.ajax({
        type: 'GET',
        url: "/management/kpi/fetch/sla",
        dataType: 'json',
        success: function (response) {
            const slaMap = response.SLATermData;
            
            $("select[name='SLATerm']").change(function() {
                const selectedTerm = $(this).val();
                $("input[name='SLACost']").val(slaMap[selectedTerm] || '');
            }).trigger('change');
        }
    });
}

内容的提问来源于stack exchange，提问作者Abdulrahman Mushref