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

Question

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

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

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>

我想填充值＝"0"；xxxx"；基于在项目下拉列表中选择的内容。

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

我知道我需要一个onchange javascript，但我有点迷失了方向。

将其保存到DB不会是问题，只是更新值字段的javascript是我陷入的地方

Answer 1

给出一个ID"selectBox"选择框And"；text字段"；到文本框。通过使用Jquery，可以填充其值。

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

在你的循环中也要做一些小的改变，添加引号"quot；价值。

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