如何在Laravel+Blade创建表单中筛选特定课程关联的课时

Hey Vlad, let's get that dependent dropdown working so only lessons tied to the selected course show up. Here's how to implement it with your existing Laravel setup:

Step 1: Prepare Course-Lesson Data for Frontend #

First, we'll pass a structured JSON object to the frontend that maps each course ID to its associated lessons. Add this right before your closing </body> tag (or in a script section in your blade file):

<script>
// Map course IDs to their lessons
window.courseLessons = {!! json_encode($courses->mapWithKeys(function ($course) {
    // Make sure your Course model's relation is named "lessons" (plural)
    // If you used "lesson" (singular), update $course->lessons to $course->lesson here
    return [$course->id => $course->lessons->map(function ($lesson) {
        return ['id' => $lesson->id, 'title' => $lesson->title];
    })];
})) !!};
</script>

Step 2: Update Your Form HTML #

Modify your lesson dropdown to start empty (except for the default prompt) — we'll populate it dynamically with JavaScript:

<div class="form-group">
    <select name="course_id" id="course-select" class="browser-default custom-select">
        <option selected>Choose course</option>
        @foreach($courses as $course)
            <option value="{{$course->id}}">{{$course->title}}</option>
        @endforeach
    </select>
</div>

<div class="form-group">
    <select name="lesson_id" id="lesson-select" class="browser-default custom-select">
        <option selected>Choose lesson</option>
    </select>
</div>

Step 3: Add JavaScript for Dropdown联动 #

Add this script to handle the course selection change and update the lesson options:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const courseSelect = document.getElementById('course-select');
    const lessonSelect = document.getElementById('lesson-select');

    courseSelect.addEventListener('change', function() {
        const selectedCourseId = this.value;
        // Clear existing lesson options except the default prompt
        lessonSelect.innerHTML = '<option selected>Choose lesson</option>';

        if (selectedCourseId && window.courseLessons[selectedCourseId]) {
            // Add lessons for the selected course
            window.courseLessons[selectedCourseId].forEach(function(lesson) {
                const option = document.createElement('option');
                option.value = lesson.id;
                option.textContent = lesson.title;
                lessonSelect.appendChild(option);
            });
        }
    });
});
</script>

Quick Notes #

• Double-check your model relations: Since you have a pivot table course_lesson, your Course model should have a lessons method using belongsToMany:

  // In Course.php
  public function lessons()
  {
      return $this->belongsToMany(Lesson::class);
  }
  

• If you named your relation lesson (singular) instead of lessons, make sure to update the JSON mapping code to use $course->lesson instead of $course->lessons.

This setup will dynamically update the lesson dropdown as soon as a course is selected, showing only relevant lessons.

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