Laravel表单下拉框显示异常及动态日期联动需求

问题1：下拉框显示ID而非对应字符串值 #

我看了你的代码，发现核心问题是pluck()方法的参数顺序搞反了！Laravel的pluck('显示文本字段', '选项值字段')是先写要显示的内容，再写作为option value的字段，你现在的写法正好反过来，导致下拉框显示的是ID而不是对应的名称/级别。

修复步骤：

1. 修改ExamReservationsController的create方法：

public function create() {
    // 正确的pluck顺序：显示字段在前，value字段在后
    $exams = Exam::pluck('level', 'id')->all(); 
    $users = User::pluck('name', 'id')->all(); // 这行你写对了，不用改
    $dateExams = collect(); // 初始为空，后面动态加载日期
    return view('exam_reservations.create', compact('exams','users','dateExams'));
}

2. 同时修复edit方法里的考试下拉框数据：

public function edit($id) {
    $examReservation = Exam_reservation::findOrFail($id);
    $exams = Exam::pluck('level', 'id')->all(); // 改成显示level文本
    $users = User::pluck('name', 'id')->all();
    // 编辑时可以预先加载对应考试的日期
    $dateExams = Date_Exam::where('exam_id', $examReservation->exam_id)
        ->pluck('date', 'id')
        ->all();
    return view('exam_reservations.edit', compact('examReservation','exams','users','dateExams'));
}

3. 调整blade模板里的选中判断（以考试下拉框为例）：

<div class="form-group {{ $errors->has('exam_id') ? 'has-error' : '' }}">
    <label for="exam_id" class="col-md-2 control-label">Exam</label>
    <div class="col-md-10">
        <select class="form-control" id="exam_id" name="exam_id">
            <option value="" style="display: none;" {{ old('exam_id', optional($examReservation)->exam_id ?: '') == '' ? 'selected' : '' }} disabled>Select exam</option>
            @foreach ($exams as $id => $level)
                <option value="{{ $id }}" {{ old('exam_id', optional($examReservation)->exam_id) == $id ? 'selected' : '' }}>
                    {{ $level }}
                </option>
            @endforeach
        </select>
        {!! $errors->first('exam_id', '<p class="help-block">:message</p>') !!}
    </div>
</div>

这样修改后，下拉框就会显示对应的考试名称（比如"C1 Advanced English"）而不是ID了。

问题2：动态显示所选考试对应的日期 + 日期格式处理 #

要实现动态关联，需要前端AJAX配合后端接口来实现，同时我们可以在后端统一处理日期格式：

步骤1：添加后端接口获取对应考试的日期

在ExamReservationsController里新增一个方法：

use Carbon\Carbon;
use Illuminate\Http\Request;

public function getExamDates(Request $request)
{
    $examId = $request->input('exam_id');
    // 根据考试ID获取对应的所有日期，同时格式化日期
    $dates = Date_Exam::where('exam_id', $examId)
        ->get()
        ->map(function($dateItem) {
            // 这里可以自定义日期格式，比如改成"Y-m-d"或者"F j, Y"（如January 1, 2024）
            $formattedDate = Carbon::parse($dateItem->date)->format('Y-m-d');
            return [
                'id' => $dateItem->id,
                'date' => $formattedDate
            ];
        });
    return response()->json($dates);
}

然后在web.php里添加路由：

Route::get('/exam-reservations/get-dates', [ExamReservationsController::class, 'getExamDates'])->name('exam-reservations.get-dates');

步骤2：前端AJAX实现动态更新下拉框

在你的表单页面底部添加以下JS代码（用jQuery简化操作，如果你没引入jQuery，需要先引入）：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // 监听考试下拉框的变化
    $('#exam_id').on('change', function() {
        const examId = $(this).val();
        const dateSelect = $('#booking_date');
        
        // 清空现有选项（保留默认提示选项）
        dateSelect.find('option:not(:first)').remove();
        
        if (examId) {
            // 发送AJAX请求获取对应日期
            $.ajax({
                url: '{{ route("exam-reservations.get-dates") }}',
                type: 'GET',
                data: { exam_id: examId },
                success: function(response) {
                    // 遍历返回的日期数据，添加到下拉框
                    response.forEach(function(date) {
                        dateSelect.append(`<option value="${date.id}">${date.date}</option>`);
                    });
                },
                error: function() {
                    alert('获取考试日期失败，请稍后重试');
                }
            });
        }
    });

    // 编辑页面初始化时，如果已有考试ID，自动加载对应日期
    const initialExamId = '{{ old("exam_id", optional($examReservation)->exam_id) }}';
    if (initialExamId) {
        $('#exam_id').trigger('change');
    }
});
</script>

这样，当用户选择某个考试后，日期下拉框会自动加载该考试对应的所有可选日期，而且日期格式是我们在后端定义好的统一格式。

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