如何使用PHP中的数据填充jQuery中的选择列表？

Question

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:

public function createContent($student)
{
//get student courses
//get lessons of each course
//get the upcoming lessons
 $lessons = $this->getLessons($courses); //need to make use of $lessons to populate lesson list

        foreach($courseArray as $c)
        {               
            $courseSelectList .= '<option id="select"'.$count.' value="'.$c['id'].'">'.$c['fullname'].'</option>';
            $count++;           
        }
//create a Lesson select list in php backend or do it in the front end dynamically with jQuery?
        return $courseSelectList.$lessonSelectList;
}

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.

How should I go about doing this? Any help would be great. Bear in mind I'm a beginner jQuery user.

Answer 1

I found a very useful and simple jQuery plugin,

http://codeassembly.com/Simple-chained-combobox-plugin-for-jQuery/

Answer 2

You will need to issue an AJAX request based upon the value of the selected course. I am assuming below that the id of the course select is 'courseSelect':

$('#courseSelect').bind('change', function() {
    var _t = $(this);
    var val = _t.val();
    $.ajax({
        url: '/path/to/script.php',
        data: 'c='+val,
        success: function(html) {
            $('#lessonSelect').html(html);
        }
    });
});

The strategy behind this is that your 'script.php' is called once a different option is selected for the courses. 'script.php' will be sent the value of the option by the browser and can be accessed as $_GET['c'] . The success function will be called once the request returns, and the html parameter will be set equal to everything that you output inside of script.php (via echo , print , error statements issued by PHP, all output).

In this sense your script.php will simply select the list of lessons from your database for the given course, and just output all of the <option value = 'Lesson Key'>Lesson</option> markup. Since the output of the server-side script is HTML markup, I named the parameter to the success function html .

script.php

<?php
    // Validate existence and proper type of input variable
    // I am assuming here that the 'value' for the option for each course is an
    // integer primary key for a table in your database
    if(!isset($_GET['c']) || !is_numeric($_GET['c']))
        exit();
   $course = intval( $_GET['c'] );
   // Select all of the lessons for the selected course from your database 
   // and output them as HTML Option elements.
?>

Answer 3

Arguably the simplest way to do it (from a jQ point of view, at least) is to call .load() and generate the HTML on the server side.

For example, lets say that you existing PHP code generates the following HTML:

<select id="select_1">
  <option value="0">Please select...</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>
<div id="container_for_select_2"></div>

Now we attach a change event to this select, and load the next select into the container <div> :

<script type="text/javascript">

  $("#select_1").change(function() {

    // Get the value of the option that was chosen
    // You could also do: var currentValue = this.options[this.selectedIndex].value;
    var currentValue = $(this).val();

    // Don't do anything if the "Please select" option was chosen
    if (currentValue == '0') {
      return;
    }

    // Load some data from the server into the next <div>
    $("#container_for_select_2").load('getselect.php?option='+currentValue);

  });

</script>

So now, in getselect.php we can do something like this:

<?php

  switch ($_GET['option']) {
    case 1:
      echo '<select><option value="1">An option</option><option value="2">Another option</option></select>';
      break;
    case 2:
      echo '<select><option value="3">An option</option><option value="4">Another option</option></select>';
      break;

    // ...etc...

  }

?>

Answer 4

I am not going to write the code for you, from a very high level this is how i would do it without plugins: create a page that returns a list of your lessons from a database or wherever they are stored, based on which course id is passed to it. create a javascript (or jquery) ajax method on your page that passes your course id to this page and clears and creates the lessons dropdown from the returned data (JSON format is good for the returned data). Call the ajax method whenever the change event is fired on your course dropdown. look at:

http://api.jquery.com/jQuery.ajax/