title: How do I populate a select list in jQuery with data from PHP?
body: <p>I have a bunch of courses and each course has a different number of lessons. So, I have two select lists one for courses and one for the lessons associated with that course. The course select list is easy, I'm doing that from the back end of PHP in a foreach loop. I'm going through all the courses that a student has:</p>
  
  <pre><code>public function createContent($student)
  {
  //get student courses
  //get lessons of each course
  //get the upcoming lessons
   $lessons = $this-&gt;getLessons($courses); //need to make use of $lessons to populate lesson list
  
          foreach($courseArray as $c)
          {               
              $courseSelectList .= '&lt;option id="select"'.$count.' value="'.$c['id'].'"&gt;'.$c['fullname'].'&lt;/option&gt;';
              $count++;           
          }
  //create a Lesson select list in php backend or do it in the front end dynamically with jQuery?
          return $courseSelectList.$lessonSelectList;
  }
  </code></pre>
  
  <p>My next step is to create a second select list that contains the lessons of the selected course. How this list is populated depends on what the student selects in the course select list. All this is dynamic and depends on the student so the courses (and thus the lessons) in the course select list is different for each student and is retrieved from the database. Given the student and course, I know which lessons should be in the lesson select list. The lessons are retrieved after I first retrieve the courses of the student as shown in the comments in the code below. I just need a way to populate the lesson select list according to what the student selects. </p>
  
  <p>How should I go about doing this? Any help would be great. Bear in mind I'm a beginner jQuery user. </p>