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

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

0 голосов
/ 07 марта 2012

У меня есть куча курсов, и у каждого курса разное количество уроков.Итак, у меня есть два списка выбора, один для курсов и один для уроков, связанных с этим курсом.Список выбора курса прост, я делаю это из серверной части 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 ]

1 голос
/ 07 марта 2012

Возможно, самый простой способ сделать это (по крайней мере, с точки зрения 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...

  }

?>
1 голос
/ 07 марта 2012

Вам нужно будет выполнить запрос 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, all output).

В этом смысле ваш 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.
?>
1 голос
/ 07 марта 2012

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

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

0 голосов
/ 07 марта 2012

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

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

...