我想这样做,以便当我单击其中一个下拉列表时,根据相关表中的记录 ID 的值立即出现。 我想要这样做,以便当我单击其中一个下拉列表时,会立即出现根据相关表中的记录 ID 的值。 当选择“golongan”时,“gaji pokok”的值会自动出现。 当选择“asisten ahli”时,“tunjangan fungsional”的值会自动出现。 当选择“主席助理|专家助理”时,“结构津贴”的值自动出现。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
抱歉,我不太懂你的语言,但你可以用 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); }