Javascript 基于choosen值在数据库中获取不同的值

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

身份证号码：1

用户识别码：101

电邮：kid@do.com

账号：30001

姓名：Kiddo

性别:男

收入：50000

---

身份证号码：2

用户识别码：101

电邮：kid@do.com

账号：30002

姓名：Kiddo

性别:男

收入：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>

帐号
*
@foreach（$key=>$account的帐户）
{{$account->account_number}
@endforeach

这是收入的输入表：

 <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>

收入
*

---

但是当用户更改账号时，收入值仍然没有更改。

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

下面是未经测试的代码，仅此而已

方法1：

<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">

功能设置收入（账号）{
const accounts=@json（$accounts->map（函数（$account）{
返回{
“accountNumber”：$account->accountNumber，
“收入”：$account->income
};})
const income=accounts.find（（account）=>account.accountNumber==accountNumber）。收入
document.getElementById（'incomeField'）。值=收入；
)
}

方法2： 您提交一个小表单，其中包含选定的

accountNumber

，然后返回

$selectedAccountIncome

，然后在income字段中输入

方法3： 使用。上面有一个类似的onChange函数，但使用

accountNumber

获取

收入

，并显示在前端。

当选择任何选项时，必须添加onChange（），在onChange（）方法中，必须根据选项选择重新调用数据，否则，数据将不会更新，因为在选择选项后您没有任何操作，这就是数据保持与以前相同的原因