Как мне заполнить список выбора в jQuery данными из PHP?

У меня есть куча курсов, и каждый курс имеет разное количество уроков. Итак, у меня есть два списка выбора, один для курсов и один для уроков, связанных с этим курсом. Список выбора курса прост, я делаю это из серверной части PHP в цикле foreach. Я прохожу все курсы, которые есть у студента:

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;
}

Мой следующий шаг - создать второй список выбора, который содержит уроки выбранного курса. Как этот список заполняется, зависит от того, что студент выберет в списке выбора курса. Все это динамично и зависит от студента, поэтому курсы (и, следовательно, уроки) в списке выбора курсов различны для каждого студента и извлекаются из базы данных. Учитывая ученика и курс, я знаю, какие уроки должны быть в списке выбора уроков. Уроки извлекаются после того, как я вначале извлекаю курсы ученика, как показано в комментариях к коду ниже. Мне просто нужен способ заполнить список выбора урока в соответствии с тем, что выбрал студент.

Как мне это сделать? Любая помощь будет отличной. Имейте в виду, что я начинающий пользователь jQuery.

Источник

4 ответа

Решение

Вам нужно будет выполнить запрос AJAX на основе стоимости выбранного курса. Ниже я предполагаю, что идентификатором выбранного курса является '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);
        }
    });
});

Стратегия, лежащая в основе этого, заключается в том, что ваш "script.php" вызывается после выбора другой опции для курсов. 'script.php' будет отправлен значением опции браузером и доступен как $_GET['c'], Функция успеха будет вызвана после возврата запроса, а параметр html будет установлен равным всему, что вы выводите внутри script.php (через echo, print, заявления об ошибках, выданные PHP, все выходные).

В этом смысле ваш script.php просто выберет список уроков из вашей базы данных для данного курса и выведет все <option value = 'Lesson Key'>Lesson</option> разметки. Поскольку выходные данные серверного сценария представляют собой HTML-разметку, я назвал параметр для функции успеха 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.
?>
Источник

Я нашел очень полезный и простой плагин jQuery,

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

Источник

Возможно, самый простой способ сделать это (по крайней мере, с точки зрения jQ) - это вызвать .load() и генерировать HTML на стороне сервера.

Например, предположим, что существующий код PHP генерирует следующий 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>

Теперь мы прилагаем change событие для этого выбора, и загрузить следующий выбор в контейнер <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>

Так что теперь, в getselect.php мы можем сделать что-то вроде этого:

<?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...

  }

?>
Источник

Я не собираюсь писать код для вас, с очень высокого уровня, вот как я бы сделал это без плагинов: создать страницу, которая возвращает список ваших уроков из базы данных или где бы они ни хранились, в зависимости от того, какой идентификатор курса передается к нему. создайте на своей странице ajax-метод javascript (или jquery), который передает идентификатор курса на эту страницу, очищает и создает раскрывающийся список уроков из возвращаемых данных (формат JSON подходит для возвращаемых данных). Вызывайте метод ajax всякий раз, когда в раскрывающемся списке курса запускается событие изменения. посмотри на:

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

Источник
Другие вопросы по тегам