根据选择的值在数据库中获取不同的值

Question

用户登录帐号相同，但帐号不同（一个用户可以有多个帐号），例如：

1. ID：1
2. 用户ID：101
3. 邮箱：kid@do.com
4. Account_number :30001
5. 姓名：孩子
6. 性别：男
7. 收入：50000

---

1. ID：2
2. 用户ID：101
3. 邮箱：kid@do.com
4. Account_number :30002
5. 姓名：孩子
6. 性别：男
7. 收入：40000

如您所见，用户帐户之间的唯一区别是收入和帐号。

我有这个简单的表格来显示基于帐号的用户数据，当用户选择帐号 30001 时，它将显示上面的值，当用户选择帐号 30002 时，用户将看到其他值。

这是选择选项的示例：

<div class="form-group form-material">
            <label class="col-lg-12 col-sm-3 control-label">Account Number
            <span class="required">*</span></label>
            <div class="col-lg-12 col-sm-9">
                <select class="form-control" id="noacc" name="noacc" required>
                @foreach($accounts as $key => $account)
                <option value="{{ $account->account_number}}" >{{ $account->account_number}}</option>   
                @endforeach
                </select>
            </div>
          </div>

这是收入的输入表格：

 <div class="form-group form-material">
            <label class="col-lg-12 col-sm-3 control-label">Income
            <span class="required">*</span></label>
            <div class="col-lg-12 col-sm-9">
              <input readonly type="text" class="form-control" name="income" value="{{ $accounts->income }}">
            </div>
          </div>

但是当用户更改帐号时，收益值仍然没有改变。

Answer 1

如果不使用 Javascript 或提交表单，这是无法实现的。因为服务器已经用 HTML/value 呈现了表单。它不能动态更改现有值。

以下是未经测试的代码，只是想法。

方法一：

<script>
function setIncome(accNumber) {
  const accounts = @json($accounts->map(function($account) {
   return {
     "accountNumber": $account->accountNumber,
     "income": $account->income
   };})
  const income = accounts.find((account) => account.accountNumber === accNumber).income
  document.getElementById('incomeField').value = income;
)

}
</script>

<select onChange="setIncome"></select>
<input name="income" id="incomeField">

方法二： 你提交一个小表单，选中accountNumber，然后后端返回$selectedAccountIncome，然后你输入到incomeField。

方法三： 使用AJAX。上面有类似的 onChange 函数，但使用accountNumber 获取income 并显示在前端。