根据选定的下拉菜单填充输入字段值

Question

我一直在尝试通过根据 model 中的上述选择框自动填充输入值来简化用户输入。

上下文：我正在尝试使用标准项目填充帐户付款。 在我的数据库中，我有以下内容：

item   | value
item 1 | Value 1
item 2 | Value 2
item 3 | value 3

我的模态代码中会有以下内容

<div class="modal-body">
  <label class="label-control">Membership Number:</label>
    <div class="input-group">
      <input type = "text" class = "form-control" name = "membership" value="">
     </div>

     <label class="label-control">Rank:</label>
       <div class="input-group">
         <select type="text" class="selectpicker" data-sytle="select-with-transition" name="item" data-size="6">
            @foreach ($payments as $p)
                <option value ={{$p->item}}>{{$p->item}}</option>
            @endforeach
          </select>
         </div>
         
         <label class="label-control">Amount</label>
           <div class="input-group">
            <input type="text" class="form-control" name = "amount" value="xxxx">
           </div>

我想填充 value="xxxx" 基于在项目下拉列表中选择的内容。

因此，如果从下拉列表中选择了项目 3，则值 3 将填充到值字段中。

我知道我需要一个 onchange javascript，但我有点迷茫。

将其保存到数据库不会有问题，只是更新值字段的 javascript 是我卡住的地方

Answer 1

给选择框一个ID “selectBox”，给文本框一个ID“textField”。 通过使用 Jquery 然后你可以填充它的值。

$(document).on('change', 'select#selectBox', function(){
     $('#textField').val();
});

还要在你的循环中做一些小改动，在值中添加引号“”。

@foreach ($payments as $p)
      <option value ="{{$p->item}}">{{$p->item}}</option>
@endforeach