Laravel中通过循环实现下拉选值后输出数据库对应值的方法

实现方案如下： #

1. 把后端产品数据注入到前端JS

直接用Laravel自带的@json指令，把product_data集合按name字段为键转成JS全局对象，方便前端快速查找对应产品的属性：

<!-- 放在页面头部或者所有JS代码之前 -->
<script>
const productMap = @json($product_data->keyBy('name'));
</script>

2. 修改Blade模板表单代码

修正原有代码的拼写错误，补充缺失的原价展示字段，删除数量下拉的静态选项：

<div class="form-group row">    
     <label>选择里程区间: </label>
    <select class="form-select" name="mileage" id="mileage" onchange="getOption()">
        @foreach ($product_data as $p)
        <option value="{{$p->name}}">{{$p->name}}</option>
        @endforeach
    </select>           
</div>
<div class="form-group row">   
     <label>可用数量: </label>
    <input type="text" class="form-control" readonly name="available_qty" id="available_qty"/>
</div>
<!-- 新增原价展示字段，对应表的original_Price字段 -->
<div class="form-group row">   
     <label>原价格: </label>
    <input type="text" class="form-control" readonly name="original_Price" id="original_Price"/>
</div>
<div class="form-group row">  
     <label>选择购买数量: </label>
    <select class="form-select" name="quantity" id="quantity" >
        <!-- 这里的选项由JS动态生成 -->
    </select>           
</div>                                  

<div class="form-group row">
    <label for="inputBid" class="col-sm-2 col-form-label" >输入报价</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="inputBid" name="bid"  />
    </div>
</div>

3. 重写JS逻辑实现动态联动

修改getOption函数，实现选中name后自动填充对应属性、动态生成数量选项：

function getOption() {
    // 获取选中的name值
    const selectedName = document.getElementById('mileage').value;
    // 从全局产品Map中拿到对应产品的所有属性
    const product = productMap[selectedName];
    // 填充可用数量和原价
    document.getElementById('available_qty').value = product.number_of_products;
    document.getElementById('original_Price').value = product.price;
    
    // 动态生成数量下拉选项，范围1到对应产品的number_of_products
    const quantitySelect = document.getElementById('quantity');
    quantitySelect.innerHTML = ''; // 先清空原有选项
    for(let i = 1; i <= product.number_of_products; i++) {
        const option = document.createElement('option');
        option.value = i;
        option.textContent = i;
        quantitySelect.appendChild(option);
    }
}

// 页面加载完成后默认触发一次，初始化第一个选项的对应数据
window.onload = function() {
    getOption();
}

4. 后端存储逻辑

首先确认BidPrice模型已经把需要存储的字段加入$fillable允许批量赋值：

// app/Models/BidPrice.php
protected $fillable = [
    'name',
    'number_of_products',
    'bid_price',
    'original_Price'
];

然后在对应的控制器方法中接收表单参数存入数据库即可：

public function store(Request $request)
{
    // 参数校验
    $validated = $request->validate([
        'mileage' => 'required|string',
        'quantity' => 'required|integer|min:1',
        'bid' => 'required|numeric|min:0',
        'original_Price' => 'required|numeric',
    ]);

    // 写入bid_price表
    BidPrice::create([
        'name' => $validated['mileage'],
        'number_of_products' => $validated['quantity'],
        'bid_price' => $validated['bid'],
        'original_Price' => $validated['original_Price'],
    ]);

    return back()->with('success', '报价提交成功');
}

内容的提问来源于stack exchange，提问作者CodeHunt