Как автозаполнить ввод текста при изменении формы выберите

Question

Я пытался отобразить harga_beli в форме ввода при выборе nama_produk в форме выбора, но при вводе формы отображается id_produk, а не harga_beli. Я загрузил вид, jquery и контроллер. Как решить эту проблему?

Просмотр

<div class="form-group">
   <label>Nama Produk</label>
   <select class="form-control" id="id_produk" name="id_produk" required>
      <option value="">-- Pilih Produk --</option>
      @foreach($produk as $produk)
         <option value="{{ $produk->id }}">{{ $produk->nama_produk }}</option>
      @endforeach
   </select>
</div>
<div class="form-group">
   <label>Harga Beli</label>
   <input type="number" class="form-control" id="harga_beli" name="harga_beli" placeholder="Harga Beli" readonly>
</div>

Jquery

$('#id_produk').on('change', function() {
   $('#harga_beli').val($('#id_produk').val())
});

Контроллер

public function create()
{
    $produk = Produk::all();

    return view('pembelian.create', compact('produk');
}

Answer 1

вы также можете попробовать это по вашему мнению

<div class="form-group">
  <label>Nama Produk</label>
  <select class="form-control" id="id_produk" name="id_produk" required>
    <option value="">-- Pilih Produk --</option>
    @foreach($produk as $produk)
       <option value="{{ $produk->id }}" data-value={{$produk->nama_produk}}> 
       {{$produk->nama_produk }}</option>
    @endforeach
 </select>
</div>

<div class="form-group">
     <label>Harga Beli</label>
     <input type="number" class="form-control" id="harga_beli" name="harga_beli" placeholder="Harga Beli" readonly>
</div>

и jquery код, подобный этому

$(document).on('change','#id_produk', function() 
{
  var selected =$('#id_produk option:selected').val();
  $('#harga_beli').val(selected);
});

Answer 2

использовать некоторое значение данных в поле опции

<div class="form-group">
   <label>Nama Produk</label>
   <select class="form-control" id="id_produk" name="id_produk" required>
      <option value="">-- Pilih Produk --</option>
      @foreach($produk as $produk)
         <option value="{{ $produk->id }}" data-value={{$produk->nama_produk}}>{{ $produk->nama_produk }}</option>
      @endforeach
   </select>
</div>
<div class="form-group">
   <label>Harga Beli</label>
   <input type="number" class="form-control" id="harga_beli" name="harga_beli" placeholder="Harga Beli" readonly>
</div>

Изменить вас jquery как:

$('#id_produk').on('change', function() {
  var input_value = $(this).find(':selected').data('value');;
  $('#harga_beli').val(input_value);
});