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

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

1 个答案: