Laravel Blade中基于选择框动态更新页面内容的教程

// app/Http/Controllers/OfferController.php (示例)

namespace App\Http\Controllers;

use App\Models\Offer; // 假设你有一个Offer模型
use Illuminate\Http\Request;

class OfferController extends Controller
{
    public function showOffers()
    {
        // 从数据库中获取所有优惠信息
        $offers = Offer::all();

        // 将数据传递给名为 'sim_sale' 的Blade视图
        return view('sim_sale', compact('offers'));
    }
}

<!-- resources/views/sim_sale.blade.php -->

<div class="form-group">
    <label for="parent_id">选择优惠方案:</label>
    <select name="offer_id" id="parent_id" class="form-control">
        <option value="">请选择一个优惠方案</option>
        @foreach ($offers as $row)
            <option value="{{ $row->id }}">{{ $row->name }}</option>
        @endforeach
    </select>
</div>

<!-- 动态显示区域：为每个优惠方案预先生成一个隐藏的div -->
@foreach ($offers as $row)
    <div class="offer-details-section" id="offer_details_{{ $row->id }}" style="display:none;">
        <h4>{{ $row->name }} 详情</h4>
        <p><strong>描述:</strong> {{ $row->details }}</p>
        <p><strong>充值金额:</strong> {{ $row->recharge }}</p>
        <!-- 你也可以在这里放置一个input字段来显示recharge，并允许用户编辑 -->
        <div class="form-group">
            <label for="offer_recharge_{{ $row->id }}">充值金额 (可编辑):</label>
            <input type="text" id="offer_recharge_{{ $row->id }}" class="form-control" value="{{ $row->recharge }}" />
        </div>
    </div>
@endforeach

<!-- 确保引入了jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 客户端脚本将放在这里 -->
<script type="text/javascript">
    // ... JavaScript/jQuery 代码 ...
</script>

// 放在 <script type="text/javascript"> ... </script> 标签内

$(document).ready(function() {
    // 监听ID为 'parent_id' 的下拉选择框的 'change' 事件
    $('#parent_id').on('change', function() {
        // 1. 隐藏所有带有 'offer-details-section' 类的元素
        $('.offer-details-section').hide();

        // 2. 获取当前选中选项的值 (即优惠方案的ID)
        var selectedOfferId = $(this).val();

        // 3. 如果有选中一个有效的优惠方案 (即值不为空)
        if (selectedOfferId) {
            // 4. 构建要显示的详情区域的ID
            var targetDivId = '#offer_details_' + selectedOfferId;

            // 5. 显示对应的详情区域
            $(targetDivId).show();
        }
        // 如果选择的是“请选择一个优惠方案”（value为空），则所有区域保持隐藏
    });

    // 页面加载时，如果需要根据某个默认值显示，可以在这里触发一次change事件
    // 例如：如果select有一个默认选中的option
    // $('#parent_id').trigger('change');
});