根据选择选项自动填充文本框

Question

我正在创建一个表格，当选择“项目”时，将根据选择选项自动填写说明。

我已经提到了其他一些链接：

Auto fill field depending on the option selected

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()方法用于更新元素的文本内容，对于input元素，没有文本内容。要更新其值，您可以使用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>