根据选定的下拉列表填充输入字段值

时间:2020-09-22 11:35:16

标签: javascript laravel bootstrap-modal

我一直试图通过基于模型中的上述选择框自动填充输入值来简化用户输入。

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

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>

我想根据项目下拉列表中选择的值填充值=“ xxxx”。

因此,如果从下拉列表中选择了第3项,则值3将填充在值字段中。

我了解我需要一个onchange javascript,但我有点迷茫。

将其保存到数据库中将不是问题,只是用来更新value字段的javascript是我所困

1 个答案:

答案 0 :(得分:0)

ID“ selectBox”提供给selectbox,将“ textField”提供给文本框。通过使用Jquery,您可以填充其值。

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

还可以在循环中进行一些小的更改,在值中添加引号“”。

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