我想這樣做，以便當我單擊其中一個下拉列表時，根據相關表中的記錄 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">×</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 進行打包？
抱歉，我不太懂你的語言，但你可以用 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); }