Laravel中如何基于select下拉框结合if语句实现车型价格联动更新input值

针对你作为Laravel新手的场景，优先推荐上手门槛最低、不需要额外复杂配置的实现方式，分两种可落地的路径：

方案一：前端预存价格映射（零后端额外开发，最快跑通） #

这个方案不需要写新的接口、不需要处理AJAX跨域、不需要刷新页面，只需要在Blade渲染的时候把所有车型对应的维修价格提前嵌入页面，靠前端原生JS监听下拉框切换修改价格输入框的值，性能最好、实现最简单。
具体修改步骤：

1. 给你的价格输入框补一个唯一id，方便JS定位元素（这是你原有代码缺的部分）：

   <div class="input-field col s12 m4 l2">
     <input 
       type="text" 
       id="repair_price"
       style="color: black" 
       value="{{ config('app.currency') . $repair_type->finalPrice }}" 
       class="form-btn" 
       disabled
     >
   </div>
   

2. 在页面底部（Blade模板的末尾位置）加一段原生JS脚本，提前建立车型和价格的映射关系：

   <script>
     // 键值和下拉框option的value一一对应，值从后端传的价格数据里取
     const vehiclePriceMap = {
       "regularsizecar": {{ $priceData['regularsizecar'] ?? 0 }},
       "mediumsizecar": {{ $priceData['mediumsizecar'] ?? 0 }},
       "compactsuv": {{ $priceData['compactsuv'] ?? 0 }},
       "minivan": {{ $priceData['minivan'] ?? 0 }}
     }
     const currencySymbol = "{{ config('app.currency') }}";
   
     // 页面加载完成后绑定事件
     document.addEventListener('DOMContentLoaded', function() {
       const vehicleSelect = document.getElementById('vehicletype');
       const priceInput = document.getElementById('repair_price');
       
       // 初始加载时就匹配当前选中车型的价格，避免和页面初始值对不上
       updatePrice(vehicleSelect.value);
       // 监听下拉框切换动作
       vehicleSelect.addEventListener('change', function() {
         updatePrice(this.value);
       });
   
       // 封装价格更新逻辑
       function updatePrice(selectedType) {
         const targetPrice = vehiclePriceMap[selectedType] || 0;
         priceInput.value = `${currencySymbol}${targetPrice}`;
       }
     })
   </script>
   

3. 对应的控制器只需要把所有车型的价格查出来传给Blade就行，不需要写额外逻辑：

   // 控制器中渲染表单的方法里，加一行数据查询
   $priceData = \App\Models\RepairType::pluck('finalPrice', 'type_code')->toArray();
   return view('repair.booking-form', compact('priceData'));
   

   这里的type_code就是你下拉框里存的regularsizecar、mediumsizecar这类值，直接用集合查询就能快速取到所有车型的对应价格，不需要循环写查询。

方案二：轻量接口异步取价（适合价格动态调整的场景） #

如果你的维修价格是后台管理员随时修改的，不想每次加载表单都把全量价格数据嵌入页面，可以加一个超简单的后端接口，配合原生fetch请求异步取价：

1. 在routes/web.php里加一个路由：

   Route::get('/repair/price/{vehicleType}', [\App\Http\Controllers\RepairController::class, 'getVehicleRepairPrice']);
   

2. 在对应控制器里加一个返回JSON的方法：

   public function getVehicleRepairPrice(string $vehicleType)
   {
       $price = \App\Models\RepairType::where('type_code', $vehicleType)->value('finalPrice');
       return response()->json([
           'price' => $price,
           'currency' => config('app.currency')
       ]);
   }
   

3. 把前端JS里的updatePrice方法改成异步请求接口拿数据再更新输入框就行，整个过程不需要页面刷新。

原有代码的优化提醒 #

• 目前的价格输入框没有设置唯一id，JS无法定位修改值，必须补上
• 监听下拉框的时候要记得和页面初始的选中状态同步，避免表单校验失败回显时，显示的价格和选中的车型不匹配
• 整个实现用原生JS完成，不需要引入jQuery、Vue等第三方依赖，对新手更友好

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