Выберите OnChange Javascript в Laravel

Я хочу сделать так, чтобы при нажатии на один из раскрывающихся списков сразу появлялось значение в соответствии с идентификатором записи в связанной таблице. Я хочу сделать так, чтобы при нажатии на один из раскрывающихся списков сразу появлялось значение в соответствии с идентификатором записи в связанной таблице. когда выбрано «голонган», автоматически появляется значение «гаджи покок». при выборе «asisten ahli» автоматически появляется значение «tunjangan fungsional». когда выбрано «pembantu ketua | asisten ahli», автоматически появляется значение «tunjangan структурный».

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

как упаковать его с помощью Javascript onChange в laravel?

javascript php ajax laravel onchange

22.11.2022 04:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

145

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

и объявите маршруты, которые вы будете вызывать в URL-адресе в ajax

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);
}

я сожалею об этом, весь этот код написан в одном файле представления?

— 22.11.2022 08:18

да, вставьте секцию скрипта до конца вашего блейда, или вы можете добавить его в другой отдельный файл js и передать параметры.

— 22.11.2022 08:22

что я должен заполнить часть URL, если данные вызываются из базы данных?

— 22.11.2022 08:32

создайте маршрут API или простой веб-маршрут, затем в этой функции маршрута или функции контроллера получите данные из базы данных и верните их в виде json, позвольте мне показать вам пример контроллера: ============== ============ $data['states'] = State::where("country_id", $request->country_id)->get(["name", "id"]); вернуть ответ () -> json ($ данные); ========================== затем покажите данные в лезвии.

— 22.11.2022 08:39

позвольте мне добавить часть контроллера в ответ выше, чтобы вы могли хорошо понять

— 22.11.2022 08:41

очень понятно, спасибо джазакаллах хайран за ваши инструкции

— 22.11.2022 08:55

22.11.2022 08:10