Laravel中实现下拉框OnChange联动填充关联表数据

需求说明 #

我需要实现以下功能：点击下拉框选项时，立即显示关联表中对应记录ID的数值：

• 选择“golongan”时，自动显示“gaji pokok”的值；
• 选择“asisten ahli”时，自动显示“tunjangan fungsional”的值；
• 选择“pembantu ketua | asisten ahli”时，自动显示“tunjangan struktural”的值。

当前页面代码 #

<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form action="/gaji/insert" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <select name="nama" type="text" class="form-control select2 @error('nama') is-invalid @enderror" value="{{ old('nama') }}">
                                    <option>-- Nama Karyawan --</option>
                                    @foreach ($karyawan as $data)
                                    <option value="{{ $data->nama }}">{{ $data->nama }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('nama')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="gol" type="text" class="form-control select2 @error('gol') is-invalid @enderror" onchange="getddl()" value="{{ old('gol') }}">
                                    <option>-- Golongan dan M K G --</option>
                                    @foreach ($golongan as $data)
                                    <option value="{{ $data->gol }} | {{ $data->mkg }}">{{ $data->gol }} | {{ $data->mkg }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_gol" type="text" placeholder="Gaji Pokok" class="form-control @error('tunjangan_gol') is-invalid @enderror" value="{{ old('tunjangan_gol') }}" id="gol">
                                <div class="invalid-feedback">
                                    @error('tunjangan_gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="jbt_fungsi" type="text" class="form-control select2 @error('jbt_fungsi') is-invalid @enderror" value="{{ old('jbt_fungsi') }}">
                                    <option>-- Jabatan Fungsional --</option>
                                    @foreach ($fungsi as $data)
                                    <option value="{{ $data->jbt_fungsi }}">{{ $data->jbt_fungsi }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('gol')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_fungsi" type="text" placeholder="Tunjangan Fungsional" class="form-control @error('tunjangan_fungsi') is-invalid @enderror" value="{{ old('tunjangan_fungsi') }}">
                                <div class="invalid-feedback">
                                    @error('tunjangan_fungsi')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="jbt_struktur" type="text" class="form-control select2 @error('jbt_struktur') is-invalid @enderror" value="{{ old('jbt_struktur') }}">
                                    <option>-- Jabatan Struktural & Fungsional --</option>
                                    @foreach ($struktur as $data)
                                    <option value="{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    @error('jbt_struktur')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="tunjangan_struktur" type="text" placeholder="Tunjangan Struktural" class="form-control @error('tunjangan_struktur') is-invalid @enderror" value="{{ old('tunjangan_struktur') }}">
                                <div class="invalid-feedback">
                                    @error('tunjangan_struktur')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <input name="total_gaji" type="text" placeholder="Total Gaji" class="form-control @error('total_gaji') is-invalid @enderror" value="{{ old('total_gaji') }}">
                                <div class="invalid-feedback">
                                    @error('total_gaji')
                                    {{ $message }}
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

实现步骤 #

1. 修正下拉框的value值（传递ID而非文本） #

当前下拉框用文本拼接作为value，无法准确定位数据库记录，需改为传递记录ID：

• gol下拉框修改option：

<option value="{{ $data->id }}">{{ $data->gol }} | {{ $data->mkg }}</option>

• jbt_fungsi下拉框修改option：

<option value="{{ $data->id }}">{{ $data->jbt_fungsi }}</option>

• jbt_struktur下拉框修改option：

<option value="{{ $data->id }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>

2. 编写Laravel后端接口 #

在GajiController中添加三个接口，用于返回对应薪资数据：

// 获取gaji pokok
public function getGajiPokok($id)
{
    $golongan = \App\Models\Golongan::findOrFail($id);
    return response()->json(['gaji_pokok' => $golongan->gaji_pokok]);
}

// 获取tunjangan fungsional
public function getTunjanganFungsional($id)
{
    $fungsi = \App\Models\Fungsi::findOrFail($id);
    return response()->json(['tunjangan_fungsi' => $fungsi->tunjangan_fungsi]);
}

// 获取tunjangan struktural
public function getTunjanganStruktural($id)
{
    $struktur = \App\Models\Struktur::findOrFail($id);
    return response()->json(['tunjangan_struktur' => $struktur->tunjangan_struktur]);
}

3. 配置路由 #

在routes/web.php中添加接口路由：

Route::get('/gaji/gaji-pokok/{id}', [\App\Http\Controllers\GajiController::class, 'getGajiPokok']);
Route::get('/gaji/tunjangan-fungsional/{id}', [\App\Http\Controllers\GajiController::class, 'getTunjanganFungsional']);
Route::get('/gaji/tunjangan-struktur/{id}', [\App\Http\Controllers\GajiController::class, 'getTunjanganStruktural']);

4. 编写JavaScript事件处理逻辑 #

在页面底部添加脚本，实现下拉框变化时的异步请求与数值填充：

// 处理golongan下拉框变化
document.querySelector('select[name="gol"]').addEventListener('change', function() {
    const id = this.value;
    const input = document.querySelector('input[name="tunjangan_gol"]');
    if (!id) {
        input.value = '';
        calculateTotalGaji();
        return;
    }
    fetch(`/gaji/gaji-pokok/${id}`)
        .then(res => res.json())
        .then(data => {
            input.value = data.gaji_pokok;
            calculateTotalGaji();
        })
        .catch(err => console.error('获取薪资失败:', err));
});

// 处理asisten ahli下拉框变化
document.querySelector('select[name="jbt_fungsi"]').addEventListener('change', function() {
    const id = this.value;
    const input = document.querySelector('input[name="tunjangan_fungsi"]');
    if (!id) {
        input.value = '';
        calculateTotalGaji();
        return;
    }
    fetch(`/gaji/tunjangan-fungsional/${id}`)
        .then(res => res.json())
        .then(data => {
            input.value = data.tunjangan_fungsi;
            calculateTotalGaji();
        })
        .catch(err => console.error('获取津贴失败:', err));
});

// 处理pembantu ketua | asisten ahli下拉框变化
document.querySelector('select[name="jbt_struktur"]').addEventListener('change', function() {
    const id = this.value;
    const input = document.querySelector('input[name="tunjangan_struktur"]');
    if (!id) {
        input.value = '';
        calculateTotalGaji();
        return;
    }
    fetch(`/gaji/tunjangan-struktur/${id}`)
        .then(res => res.json())
        .then(data => {
            input.value = data.tunjangan_struktur;
            calculateTotalGaji();
        })
        .catch(err => console.error('获取津贴失败:', err));
});

// 自动计算总薪资
function calculateTotalGaji() {
    const gajiPokok = parseFloat(document.querySelector('input[name="tunjangan_gol"]').value) || 0;
    const tunjanganFungsi = parseFloat(document.querySelector('input[name="tunjangan_fungsi"]').value) || 0;
    const tunjanganStruktur = parseFloat(document.querySelector('input[name="tunjangan_struktur"]').value) || 0;
    document.querySelector('input[name="total_gaji"]').value = (gajiPokok + tunjanganFungsi + tunjanganStruktur).toFixed(2);
}

5. 清理旧代码 #

移除gol下拉框上的onchange="getddl()"属性，因为已通过addEventListener绑定事件。

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