在Laravel中实现select选项切换时同步更新div与input字段的关联值

这里给你两种可行实现方案，可根据你的项目数据量级选择：

方案1：前端预存全量Offer数据（无额外接口请求，适合Offer数量少的场景） #

该方案无需新增后端接口，直接把所有Offer数据序列化后存在前端，切换选择时直接本地匹配数据即可，实现最简单。

1. 修正Blade模板代码 #

<select name="offer_id" id="offer" class="form-control">
    <option value=""> Select Offer</option>
    @foreach ( $offers as $row )
    <option value="{{ $row->id }}">{{ $row->name }}</option>
    @endforeach
</select>
<div id="offer-details"></div> 
<input type="text" value="" id="offer-recharge" />

<!-- 注入全量Offer数据到前端 -->
<script>
window.offers = @json($offers->keyBy('id'));
</script>

注：你原来的写法直接调用$offers->details是错误的，$offers是模型集合不是单个模型实例，会直接报错，所以初始展示区域默认留空即可

2. 添加交互JS逻辑 #

document.addEventListener('DOMContentLoaded', function() {
    const offerSelect = document.getElementById('offer');
    const detailsDiv = document.getElementById('offer-details');
    const rechargeInput = document.getElementById('offer-recharge');

    // 监听下拉框切换事件
    offerSelect.addEventListener('change', function() {
        const selectedId = this.value;
        if (selectedId && window.offers[selectedId]) {
            // 选中选项时填充对应数据
            const selectedOffer = window.offers[selectedId];
            detailsDiv.textContent = selectedOffer.details;
            rechargeInput.value = selectedOffer.recharge;
        } else {
            // 未选中时清空内容
            detailsDiv.textContent = '';
            rechargeInput.value = '';
        }
    });
});

input默认就支持用户自定义输入，只要你不添加readonly属性即可，用户修改后的值不会影响预存的原始数据

方案2：AJAX异步请求拉取数据（适合Offer数量多的场景） #

如果Offer表数据量很大，预存全量数据会增加页面体积，可选择切换选项时异步请求后端拉取对应数据。

1. 新增路由 #

在routes/web.php中添加对应接口路由：

Route::get('/api/offer/{id}', [YourController::class, 'getOffer'])->name('api.offer.get');

将YourController替换为你当前使用的控制器类名

2. 控制器新增对应方法 #

public function getOffer($id)
{
    return response()->json(Offer::findOrFail($id));
}

3. 调整JS逻辑 #

document.addEventListener('DOMContentLoaded', function() {
    const offerSelect = document.getElementById('offer');
    const detailsDiv = document.getElementById('offer-details');
    const rechargeInput = document.getElementById('offer-recharge');

    offerSelect.addEventListener('change', async function() {
        const selectedId = this.value;
        if (!selectedId) {
            detailsDiv.textContent = '';
            rechargeInput.value = '';
            return;
        }
        try {
            const res = await fetch(`/api/offer/${selectedId}`);
            const offer = await res.json();
            detailsDiv.textContent = offer.details;
            rechargeInput.value = offer.recharge;
        } catch (e) {
            alert('获取套餐信息失败，请重试');
        }
    });
});

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