Laravel 8 在下拉列表中選擇值后自動填充

Question

我又出問題了。。

如果我選擇 rute banjarmasin-jakarta，biaya pelayaran 字段將填滿 1.750.000

但是，我想再次選擇“cari rute pelayaran”，biaya pelayaran 字段將填充 0

選擇“cari rute pelayaran”在 biaya pelayaran 字段中填充 0

這是我的看法

<select class="form-control select2bs4" id="biaya_pelayaran_id" name="biaya_pelayaran_id"
                            style="width: 100%;">
                            <option value="">Cari Rute Pelayaran</option>
                            @foreach ($biaya_pelayaran as $item)
                                <option value="{{ $item->id }}"> Rute: {{ $item->rute_asal }}
                                    -
                                    {{ $item->rute_tujuan }} || Unit:
                                    {{ $item->unit->nama }} || Biaya:
                                    {{ number_format($item->biaya_pelayaran) }}
                                </option>
                            @endforeach
                        </select>
   <div class="col-md-4">
                            <div class="form-group">
                                <label for="biaya_kapal">Biaya Pelayaran</label>
                                <input type="number" class="form-control" id="biaya_kapal" name="biaya_kapal"
                                    value="0" readonly>
                            </div>
                        </div>

我的 ajax/javascript 代碼

 $('#biaya_pelayaran_id').change(function() {
        var id = $(this).val();
        var url = '{{ route('getBiayaPelayaran', ':id') }}';
        url = url.replace(':id', id);

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            success: function(response) {
                if (response !== null) {
                    $('#biaya_kapal').val(response.biaya_pelayaran);
                }
            }
        });
    });

控制器

public function getBiayaPelayaran($id = 0)
{
    $data = BiayaPelayaran::find($id);
    echo json_encode($data);
}

Answer 1

用它替換你的 ajax/javascript 代碼它可能有效

    $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        success: function(response) {
            if (response !== null) {
                $('#biaya_kapal').val('');
                $('#biaya_kapal').val(response.biaya_pelayaran);
            }
        }
    });