Автозаполнение текстового поля в зависимости от выбора

Question

Я создаю таблицу, в которой при выборе «Элемент» описание будет заполняться автоматически в зависимости от параметра выбора.

Я ссылался на некоторые другие ссылки, такие как:

Автоматическое заполнение поля в зависимости от выбранной опции

https://www.reddit.com/r/laravel/comments/adg9s5/make_a_text_box_automatically_fill_depending_on/

но никто из них не отвечает на мой вопрос.

Вот мой сценарий

$('#item').change(function(e){
     var element = $(this).find('option:selected'); 
     var desc = element.attr("Description");
    $('#Description').text(desc);
    console.log(desc)

});

Это для элемента

<select class="form-control select2" id="item" name="item">
<option value="" disabled selected>None</option>
@foreach ($deliveryitems as $items)
<option  value="{{$items->Id}}">{{$items->Item_Code}}</option>
@endforeach
</select>

Это для описания

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

Это мой контроллер

$deliveryitems = DB::table('inventories')
        ->leftJoin('deliveryitem','inventories.Id','=','deliveryitem.inventoryId')
        ->select('inventories.Id','deliveryitem.formId','inventories.Item_Code','inventories.Description','inventories.Unit','deliveryitem.Qty_request')
        ->get();

Как автоматически заполнить описание элемента на основе элемента, выбранного из опций выбора?

Answer 1

Метод text() используется для обновления текстового содержимого элемента, для входного элемента текстовое содержимое отсутствует. Для обновления его значения вы можете использовать метод val().

$('#Description').val(desc);

Кроме того, нет атрибута Description для элемента option, поэтому вы должны добавить атрибут таким же образом, как добавлено свойство value.

<option  value="{{$items->Id}}" Description="{{$items->Description}}">{{$items->Item_Code}}</option>

$('#item').change(function(e) {
  var element = $(this).find('option:selected');
  var desc = element.attr("Description");
  $('#Description').val(desc);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
  <option value="" disabled selected>None</option>
  <option value="1" Description="a">1</option>
  <option value="2" Description="b">2</option>
  <option value="3" Description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>

---

Всегда лучше использовать атрибут data-* для пользовательского атрибута.

PHP:

<option  value="{{$items->Id}}" data-description="{{$items->Description}}">{{$items->Item_Code}}</option>

JQuery:

$('#item').change(function(e){
     var element = $(this).find('option:selected'); 
     var desc = element.data("description");
    $('#Description').val(desc);
    console.log(desc)
});

$('#item').change(function(e) {
  var element = $(this).find('option:selected');
  var desc = element.data("description");
  $('#Description').val(desc);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control select2" id="item" name="item">
  <option value="" disabled selected>None</option>
  <option value="1" data-description="a">1</option>
  <option value="2" data-description="b">2</option>
  <option value="3" data-description="c">3</option>
</select>

<input type="text" class="Description form-control" name="Description" id="Description" readonly>