Динамические списки (Динамический select)
Как обычно проходит свой путь развития веб-разработчик-самоучка? Он занимается тем, что ему кажется более простым. Считает, что ему вполне достаточно и этого для решения тех задач, которые стоят перед ним на начальном этапе. Но рано или поздно любой веб-разработчик приходит к пониманию того, что его знаний ему катастрофически не достаточно. Человек, мало-мальски знающий PHP (и, наверное, что-то понимающий в HTML и CSS ), до последнего будет отрицать необходимость изучения JavaScript . Будет сам себя убеждать в том, что ему это сейчас не нужно, что хватит и того багажа знаний и навыков, которые имеются.
Но приходит он… и тут капитулируют все… Он заставляет неистово гуглить, усердно писать на форумы, искать, копать, латать дыры в знаниях. Он коварен. Он — , .
Почему? Что к этому приводит? Ну, так случается, что ВНЕЗАПНО нужно сделать так, чтобы при выборе одного параметра в раскрывающемся списке, что-то происходило. Например, при выборе Ростовской области из списка регионов нужно отфильтровывать список населенных пунктов, чтобы для Ростовкой области нельзя было выбрать города и села Еврейской автономной области. Или при выборе автопроизводителя происходила фильтрация по маркам машин. Примеров можно привести чуть больше 9000.
Подробнее изучим задачу. Допустим, у нас есть три поля раскрывающихся списков: Тип транспорта, Вид транспорта, Категории транспорта. В конечном итоге нам необходимо, чтобы пользователь указал нужую ему категорию транспорта. Но мы хотим упростить жизнь своему пользователю, и не желаем, чтобы он утруждал себя поиском нужной категории среди совсем ненужных ему данных. Ведь категорий транспорта может быть великое множество, но подразделяются они на разные виды и типы.
Мы решили, что нам хватит трех списков. Делая выбор в первом, пользователь получает отфильтрованный второй список. В него попадут только те значения, которые относятся к выбранной категории в первом списке. Далее, делая выбор во втором списке, пользователь получает третий, сформированный по описанному выше принципу.
Следующей задачей является вот что — нет смысла позволять пользователю раскрывать второй и третий список до того, как не будет сделан выбор в первом. Ведь что он там сможет увидеть? Данные туда подгружаются динамически, основываясь на выбранных значениях. Значит до момента выбора второй и третий списки должны быть неактивными.
И ещё одно уточнение. Если пользователь захочет изменить выбранные данные, зависимые от него поля должны быть сброшены в исходное состояние. Это должно происходить для того, чтобы в списках всегда были только значения, которые имеют отношение к выбранным категориям и типам.
Вам важно знать вот что! Информация в этой статье для вас, скорее всего, сегодня уже является устаревшей. Вряд ли вы пытаетесь что-то «писать» для PHP версией старше чем 5.5. А если и пытаетесь. зачем оно вам? Среди материалов я уже разместил статью с построением динамических списков (динамических select-ов), работающих в трио с MySQL и PDO. То есть там информация для select-ов берётся из базы данных MySQL, а не просто хранится в массивах. Там работоспособный код. Смело переходите в ту статью.
Итак, создаем форму с тремя списками.
Создав данный HTML-документ с данным кодом и откроете его в своем броузере, вы увидите форму с тремя списками, два из которых будут неактивными. Не очень красиво они сейчас выглядят. Давайте изменим их внешний вид. Для этого нам нужно будет создать небольшой CSS-документ, который мы подключим в заголовке созданного ранее HTML-документа. В этот CSS-документ мы запишем следующее:
Конечно же внешний вид формы у вас может быть своим :) Что дальше? Давайте подумаем. При выборе значения в первом списке мы должны получить перечень значений для второго. Даже не хочу сейчас описывать решение этого процесса одним только PHP . Нужно помнить одно: если речь идёт о последствиях действий пользователя, значит это JavaScript .
Что должно происходить? При возникновении события выбора значения в первом списке, выбранное значение должно быть отправлено обработчику, который в ответ отправит перечень значений для второго списка, непосредственно связанных с первым. Этот перечень мы будем получать от сервера, так как предполагаем, что нужная нам информация хранится в базе данных (MySQL , к примеру). Значит из JavaScript -сценария нам нужно будет выполнить -запрос к серверу. После того, как сервер пришлет ответ, мы помещаем его во второй список, и делаем его активным. Начнем писать наш JavaScript -сценарий.
В представленном коде для вас будет достаточно много нового. Я снабдил его обширными комментариями, которые помогут вам понять суть процесса. Теперь пришла очередь взглянуть на сценарий-обработчик AJAX-запросов. Он у нас находится в файле query.php.
Можете проверять select-ы. Они отлично работают. Добавить ещё один select вы вполне сможете сами. Я помню, как много времени потратил когда-то на поиски нужной мне информации. Гуглил, искал, писал… что угодно делал, но только не читал книги и документацию. Поэтому, если вы пришли сюда и вам подошли описанные выше скрипты, не поленитесь — почитайте мануалы :)
P.S. Вам доступны описанные скрипты и в виде архива.
Вам важно знать вот что! Информация в этой статье для вас, скорее всего, сегодня уже является устаревшей. Вряд ли вы пытаетесь что-то «писать» для PHP версией старше чем 5.5. А если и пытаетесь. зачем оно вам? Среди материалов я уже разместил статью с построением динамических списков (динамических select-ов), работающих в трио с MySQL и PDO. То есть там информация для select-ов берётся из базы данных MySQL, а не просто хранится в массивах. Там работоспособный код. Смело переходите в ту статью.