如何根据表单car_id字段选择获取车型并动态显示对应字段？

要实现选择车辆后动态控制其他字段，需要分后端调整API返回数据和前端监听选择事件处理字段两步来做：

1. 后端修改API接口，返回额外车辆信息 #

你的select2_from_ajax依赖admin/api/cars接口返回数据，默认可能只返回id和name，需要修改接口逻辑，把车辆的type和model字段一起返回：

// 假设API对应的控制器方法示例
public function getCars(Request $request)
{
    $query = \App\Models\Car::query();

    // 处理搜索关键词
    if ($request->has('q')) {
        $query->where('name', 'like', '%' . $request->input('q') . '%');
    }

    // 必须包含id、name（对应字段配置的attribute），同时添加需要的type和model
    return $query->select('id', 'name', 'type', 'model')->get();
}

2. 前端监听Select2选择事件，控制其他字段 #

通过监听car_id字段的Select2选择变化事件，获取选中车辆的额外信息，再动态控制表单字段的显示、隐藏或赋值：

方法一：直接在Crud控制器中注入JS代码 #

在你的Crud控制器的setupCreateOperation或setupUpdateOperation方法中，添加自定义脚本：

$this->crud->pushScript(<<<JS
$(document).ready(function() {
    // 监听car_id字段的选择事件
    $('#field-car_id').on('change', function() {
        const selectedCar = $(this).select2('data')[0];
        
        if (selectedCar) {
            // 获取车辆类型和型号
            const carType = selectedCar.type;
            const carModel = selectedCar.model;
            
            // 示例1：根据车型显示/隐藏特定字段
            if (carType === 'SUV') {
                $('#field-suv_specific').show();
                $('#field-sedan_specific').hide();
            } else if (carType === 'Sedan') {
                $('#field-suv_specific').hide();
                $('#field-sedan_specific').show();
            } else {
                $('#field-suv_specific, #field-sedan_specific').hide();
            }
            
            // 示例2：自动填充型号到对应字段
            $('#field-car_model').val(carModel).trigger('change');
        } else {
            // 未选择车辆时重置状态
            $('#field-suv_specific, #field-sedan_specific').hide();
            $('#field-car_model').val('');
        }
    });
});
JS);

方法二：添加到自定义JS文件 #

如果项目有单独的自定义JS文件（比如public/js/backpack/custom.js），可以把上述JS代码放入该文件，确保页面加载时引入即可。

注意：需要确保表单中对应字段（比如field-suv_specific、field-car_model）的ID正确，和你在Crud控制器中配置的字段name对应（字段ID格式为field-字段名）。

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