Динамический SELECT

@Dustinsk82la · Регистрация: 13.03.2013

Студворк — интернет-сервис помощи студентам

Есть задача сделать раскрывающийся список с данными из БД. В зависимости от выбора в первом списке, формируется второй и т.д.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 Файл index.php
<?php
  require_once( 'database.php' ); // Подключаем файл для соединения с СУБД MySQL
  require_once( 'functions.php' ); // Подключаем файл, в котором будем объявлять пользовательские функции
?>
<!DOCTYPE html> <!-- Пишем в рамках стандарта HTML5 -->
<html>
  <head>
    <title>Выбор марки и модели автомобиля</title> <!-- Подключаем библиотеку jQuery -->
       <script src="/js/jquery-2.1.4.js"></script>
    <!--<script src="//libs.raltek.ru/libs/jquery/1.8.3/js/jquery-1.8.3.js"></script> --> 
    <link href="style.css" rel="stylesheet" type="text/css" /><!-- Подключаем таблицу стилей --> 
    <script src="scripts.js"></script> <!-- Подключаем JavaScript-файл с нашим сценарием, который и будет получать данные об автомобилях -->
  </head>
  <body>  <!-- Создаем контейнер-обертку для нашей формы -->
    <div id="car_producers_wrapper">  <!-- Сама форма -->
      <form name="car_producers" id="car_producers" > <!-- Контейнер для поля выбора производителя -->
        <div class="row"> <!-- Метка поля производителей автомобилей -->
          <label for="producer">Выберите объект</label> <!-- Раскрывающийся список производителей автомобилей -->
        <select id="producer">
              <option value="0">Выберите из списка</option>
              <?php  // Получаем перечень производителей в виде массива           
                $aProducers = getProducers(); // Для каждого элемента массива производителей автомобилей...
        foreach ( $aProducers as $aProducer ) // Создаем свой элемент раскрывающегося списка
                {
                  print '<option value="' . $aProducer['id'] .'">' . $aProducer['name_object'] . '</option>';               
        }
              ?>
            </select>
        </div>
        <!-- Контейнер для поля выбора модели автомобиля выбранного производителя -->
        <div class="row"> <!-- Метка поля выбора марки автомобиля -->
          <label for="model">Выберите устройство:</label>
          <!-- Раскрывающийся список выбора марки автомобиля выбранного производителя -->
          <!-- Изначально список пуст и неактивен -->
          <!-- Данные в нем появятся после выбора производителя -->
          <select id="model" disabled >
            <option value="0">Выберите из списка</option>
          </select>
        </div>
      </form>
    </div>
  </body>
</html>

Файл requesr.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
// Подключаем файл для соединения с СУБД MySQL
require_once( 'database.php' );
// Подключаем файл, в котором будем объявлять пользовательские функции
require_once( 'functions.php' );
 
if ( empty( $_POST ) ) {
    die( "Массив \$_POST пустой" );
}
elseif ( empty( $_POST[ 'request' ] ) ) {
    die( "Не передан запрос" );
}
else {
    // Очищаем строку с типом запроса от лишних пробелов и защищаемся от возможных SQL-инъекций
    $request = htmlspecialchars( trim( $_POST[ 'request' ] ) );
    // Убираем тип запроса из массива $_POST
    unset( $_POST[ 'request' ] );
}
// В переменной $response будем возвращать данные AJAX-запросу
$response = NULL;
switch ( $request ) {
    case "getModels":
        $response = getModels( $_POST );
    break;
}
echo json_encode( $response );
?>

Файл functions.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
function getProducers()   //Функция для получения перечня производителей автомобилей
{
    connect();  // Подключаемся к СУБД MySQL // Выбираем всех производителей из таблицы
    //$sql = "SELECT * FROM `producers` ORDER BY `producer`";
    $sql = "SELECT * FROM `object_table` ";  // Выполняем запрос
    $query = mysql_query( $sql ) or die ( mysql_error() );  // Поместим данные, которые будет возвращать функция, в массив
    $array = array();// Пока что он будет пустым
    $i = 0;// Инициализируем счетчик
    while ( $row = mysql_fetch_assoc( $query ) ) 
        {
          $array[$i]['id'] = $row['id'];            // Идентификатор производителя
          $array[$i]['name_object'] = $row['name_object'];  // Имя производителя    
          $i++;// После каждой итерации цикла увеличиваем счетчик
    }
    return $array;  // Возвращаем вызову функции массив с данными
}
function getModels( array $array ) // Функция, которая выбирает модели автомодилей по переданному ей идентификатору производителя
{   
    $sProducerId = htmlspecialchars(trim ($array['dev_for_object']));   // Сохраняем идентификатор производителя из переданного массива
    connect(); // Подключаемся к MySQL
    $sql = "SELECT * FROM `device_table` WHERE `dev_for_object` = '" . $sProducerId . "' ORDER BY `name_dev`";  // Строка запроса из базы данных
    $query = mysql_query($sql) or die (mysql_error()); // Выполняем запрос
    $array = array();  // Поместим данные, которые будет возвращать функция, в массив Пока что он будет пустым
    $i = 0;  // Инициализируем счетчик
    while ($row = mysql_fetch_assoc($query))
        {
            $array[$i]['id'] = $row['id'];      // Идентификатор модели
            $array[$i]['name_dev'] = $row['name_dev'];  // Наименование модели    
            $i++; // После каждой итерации цикла увеличиваем счетчик
    }
    return $array; // Возвращаем вызову функции массив с данными
}
?>

Файл scripts.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(function($) 
{
  "use strict"; // Включаем строгий режим ECMA-Script
  /**
  * В скрипте мы будем выполнять AJAX-запросы к СУБД MySQL
  * Чтобы каждый раз не писать один и тот же код AJAX-запроса, создадим 
  * свой метод request в объекте jQuery
  */
  $.extend( 
  { 
  request: function( options )  // В методе request будут различные опции (настройки)
  {
  options = $.extend(  // Это своего рода настройки по умолчанию, созданные в объекте options
  {
    type: "POST",               // Метод передачи данных серверу
    url: "requests.php",            // Путь к файлу со сценарием обращения к СУБД
    data: null,                 // Данные, которые мы будем передавать серверу
    async: false,               // Асинхронность выполнения AJAX-запроса
    dataType: "json",               // Тип данных, в котором они передаются
    before: null,               // Код, выполняемый перед AJAX-запросом
    error: function() {},           // Код, выполняемый в случае какой-либо ошибки при AJAX-запросе
    complete: options.callback,                 // Код, выполняемый после AJAX-запроса    
    success: function (result) 
    {   // Код, выполняемый после получения ответа от сервера
      $.response.result = result;   // Помещаем ответ от сервера в отдельный объект
    },
      result: null,                 // Результат работы
      callback: null                    // Функция обратного вызова           
  }, 
    options );
    options.before = function()
    {
      alert( "ok before" );
    };
    // Тело AJAX-запроса
    $.ajax(
    {
      type: options.type,
      url: options.url,
      data: options.data,
      async: options.async,
      dataType: options.dataType,
      before: options.before,
      error: options.error,
      complete: options.complete,
      success: options.success
    });
    return this;    
  },
  // Объект, в котором хранится ответ от сервера, полученный через AJAX-запрос
  response: 
  {
    result: {}
  }
});
    jQuery(function()
    {
    /**
    *  При выборе производителя нужно сделать многое
    *  Сначала из списка моделей должны быть удалены все имеющиеся модели автомобилей
    *  Затем поле выбора модели автомобиля должно стать неактивным
    */
    $( '#producer' ).change(function() // Обработчик события выбора производителя
    {
      var producer_id = $( this ).val();    // Идентификатор выбранного производителя
      $( '#model' ).prop( 'disabled', true )    // Отключаем поле, установив значения свойства disabled
      .find( 'option:not( :first )' ).remove();  // Находим и удаляем все возможные модели автомобилей из раскрывающегося списка
      if ( producer_id !== 0 ) // Если был выбран конкретный производитель
      {
        $.request( // Создаем AJAX-запрос, который вернет нам перечень моделей для выбранной марки
        {
          //data: "request=getModels&producer_id=" + producer_id,
          data: "request=getModels&dev_for_object=" + producer_id
        });
    // Успешный AJAX-запрос должен закончиться вставкой полученного перечня моделей 
    // в раскрывающийся список select#model
    // Результат AJAX-запроса мы сохраняли в отдельном объекте
    var i = 0, models = $.response.result;
    for ( i; i < models.length; i++ )
        {
      $( '#model' ).append( '<option value="' + models[i].id + '">' + models[i].model + '</option>' );
    }
        $( '#model' ).prop( 'disabled', false ); // Включаем поле со списком моделей    
      }
    }); // Обработчик события выбора производителя
    });
})(jQuery); // Используем немедленно вызываемую анонимную функцию

Файл database.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
/**
  * Функция для подключения к СУБД MySQL.
  * Функция не принимает никаких параметров.
  * Функция предназначена для использования, в основном,
  * с одной базой данных
  */
function connect() 
{
    // Объявляем переменные, в которых будут храниться параметры для подключения к СУБД
    $db_host = 'localhost'; // Сервер
    $db_user = 'root';  // Имя пользователя
    $db_password = '';  // Пароль пользователя
    $db_name = 'my_chart_data';  // Имя базы данных
    // Подключаемся к серверу
    $conn = mysql_connect($db_host, $db_user, $db_password) or die("<p>Невозможно подключиться к СУБД: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "</p>");
    // Эта часть кода выполнится только в случае успешного подключения к серверу
    // Выбираем базу данных
    $db = mysql_select_db($db_name, $conn) or die("<p>Невозможно подключиться к базе данных: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "</p>");
    // Эта часть кода выполняется только в случае успешного подключения к БД
    // Указываем серверу, что данные, которые мы от него получаем, нам нужны в кодировке UTF-8
    $query = mysql_query("set names utf8", $conn) or die("<p>Невозможно выполнить запрос к базе данных: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "</p>");
}
?>

Пример кода брал отсюда: http://lezhenkin.ru/examples/p... ect-mysql/
Заменил только БД. Но во втором раскр. списке данные отображаются, как undefined. Причем кол-во записей в нем соотв. действительности. Грешу на scripts.js. Таблицы создал такие же, даже на том же движке MyISAM. Подскажите в чем может быть загвоздка.

Добавлено через 1 час 10 минут
Все дело в названии столбца "name_dev" из таблицы "device_table". Если его подменить на исходное "model", то все работает. Так что капать нужно в этом направлении.

crautcher · 20.11.2015, 16:25

Сообщение от Dustinsk82la

PHP
1
echo json_encode( $response );

тут вроде header нужен перед выводом, ведь

Сообщение от Dustinsk82la

JavaScript
1
dataType: "json",

PHP
1
2
header('Content-Type: application/json');
echo json_encode( $response );

@Dustinsk82la · 20.11.2015, 16:33 **[ТС]**

Ошибка найдена. Файл scripts.js

JavaScript
1
$( '#model' ).append( '<option value="' + models[ i ].id + '">' + models[ i ].name_dev + '</option>' );

Все было просто. model меняем на наше name_dev

@RomanGural · 06.08.2017, 12:04

Всем доброго времени суток.
Не хочу создавать новой темы, так что продолжу эту. По этой же инструкции создал список и застрял, мне нужно выбранные в списке 2 значения передать дальше на поиск по базе, никак не могу понять как взять эти два значения и передать их в такой запрос

PHP
1
2
$sapros=mysql_query("SELECT * FROM main_tables WHERE name LIKE 'значение1 с выпадающего списка' AND
p2 LIKE '%".значение2 с выпадающего списка."%'");

Спасибо за ответы

@Виталюска · 08.08.2017, 10:39

RomanGural, вот посмотри этот пример тык

@andyyy · 08.08.2017, 12:19

Сообщение от RomanGural

Всем доброго времени суток.
Не хочу создавать новой темы, так что продолжу эту. По этой же инструкции создал список и застрял, мне нужно выбранные в списке 2 значения передать дальше на поиск по базе, никак не могу понять как взять эти два значения и передать их в такой запрос

сейчас у вас запись такого вида
где столбец name like значению из выпадающего списка и p2 like значению из выпадающего списка, то есть должны сработать два условия обязательно!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Виталюска 576 / 514 / 253 Регистрация: 26.09.2010 Сообщений: 2,603
	08.08.2017, 10:39
	RomanGural, вот посмотри этот пример тык 0