根据 select 选项自动填写文本框

Question

我正在创建一个 table，当 "Item" 被 select 编辑时，描述将根据 select 选项自动填充。

我提到了一些其他链接，例如：

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

但其中 none 回答了我的问题。

这是我的脚本

$('#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();

如何根据 select 从 select 选项编辑的项目自动填写项目描述？

Answer 1

text() method is using to update the text content of the element, for the input element, there is no text content. To update its value you can use val() 方法。

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

除此之外，option 元素没有 Description 属性，因此您必须以添加 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>

根据 select 选项自动填写文本框

Auto-fill in textbox based on select option

jquery

laravel-5.1