在 Laravel 上選擇 OnChange Javascript

Question

我想這樣做，以便當我單擊其中一個下拉列表時，根據相關表中的記錄 ID 的值立即出現。 我想要這樣做，以便當我單擊其中一個下拉列表時，會立即出現根據相關表中的記錄 ID 的值。 當選擇“golongan”時，“gaji pokok”的值會自動出現。 當選擇“asisten ahli”時，“tunjangan fungsional”的值會自動出現。 當選擇「主席助理|專家助理」時，「結構津貼」的值會自動出現。

<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>

如何在 laravel 使用 Javascript onChange 進行打包？

Answer 1

抱歉，我不太懂你的語言，但你可以用 jquery 做這樣的事情

<div class="form-group mb-3">
        <select  id="country-dropdown" class="form-control">
            <option value="">-- Select Country --</option>
            @foreach ($countries as $data)
            <option value="{{$data->id}}">
                {{$data->name}}
            </option>
            @endforeach
        </select>
    </div>
    <div class="form-group mb-3">
        <select id="state-dropdown" class="form-control">
        </select>
    </div>
    <div class="form-group">
        <select id="city-dropdown" class="form-control">
        </select>
    </div>

您可以將依賴下拉列表保留為空，然後透過ajax取得這些依賴下拉列表，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        /*------------------------------------------
        --------------------------------------------
        Country Dropdown Change Event
        --------------------------------------------
        --------------------------------------------*/
        $('#country-dropdown').on('change', function () {
            var idCountry = this.value;
            $("#state-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-states')}}",
                type: "POST",
                data: {
                    country_id: idCountry,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#state-dropdown').html('<option value="">-- Select State --</option>');
                    $.each(result.states, function (key, value) {
                        $("#state-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                }
            });
        });

        /*------------------------------------------
        --------------------------------------------
        State Dropdown Change Event
        --------------------------------------------
        --------------------------------------------*/
        $('#state-dropdown').on('change', function () {
            var idState = this.value;
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-cities')}}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                }
            });
        });

    });
</script>

並在ajax中宣告你將在url中呼叫的路由

Route::post('etch-states', [DropdownController::class, 
'fetchState']);
Route::post('fetch-cities', [DropdownController::class, 'fetchCity']);

在控制器中執行以下操作：

public function fetchState(Request $request)
{
    $data['states'] = State::where("country_id", $request->country_id)
                            ->get(["name", "id"]);

    return response()->json($data);
}
/**
 * Write code on Method
 *
 * @return response()
 */
public function fetchCity(Request $request)
{
    $data['cities'] = City::where("state_id", $request->state_id)
                                ->get(["name", "id"]);
                                  
    return response()->json($data);
}