Введение

Каскадные выпадающие списки – это совокупность из множества списков, данные в которых связаны друг с другом, т.е. при выборе значения в одном списке, содержимое последовательно изменяются и в других. Ярким примером каскадных списков может служить выбор географического местоположения, т.е. последовательного выбора страны, региона, города. Или другой пример, выбор товара по категориям, который будет рассмотрен в статье.
Кратко реализацию инструмента “выбор товара по категориям” можно описать так. Входящая в состав библиотеки jQuery, функция $.ajax() обращается на сервер к подготовленному PHP сценарию, который запрашивает данные из MySQL, получает их и формирует в формате JSON, после передает обратно функции. На основе полученных данных динамически создаются каскадные списки с неограниченной вложенностью.

MYSQL

Все категории товара хранятся в одной таблице, под названием “categories”, ее структура:



Запрос для создания таблицы:

CREATE TABLE IF NOT EXISTS `categories` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent` int(11) NOT NULL,
`name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

Данные

Заполняя данными таблицу, корневым категориям необходимо установить значение parent = 0, для остальных категорий любой вложенности в значении parent будет указана id категории родителя.



Корневые категории всегда имеют значение parent=0, все остальные категории могут быть как родительскими, так и дочерними. К примеру категория “DVD-плееры” (id=44), считается дочерней по отношению к категории “Домашняя аудио-, видео- техника” (id=36), поэтому категория “DVD-плееры” имеет значение (parent=36), но она также является родительской для нескольких категорий “Blur-ray-проигрыватели” (id=52), “DVD+VHS видеомагнитофоны” (id=53) и “Прочие DVD проигрыватели” (id=58) и т.д.

HTML

В теле документа поместите блок с уникальным ID=selectBox. В данный блок будут помещаться элементы каскадных выпадающих списков select, которые будет генерировать jQuery скрипт рассмотренный ниже. А также блок, где будет отображаться служебная информация ID=selectBoxInfo.

<div id="selectBox"></div>
<div id="selectBoxInfo"></div>

PHP

Создайте файл и поместите в него следующий php сценарий, задача которого запрашивать из базы категории по указанному параметру `parent`=idcategory. Данные, которые генерирует сценарий, используются для формирования выпадающего меню select

<?
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
 $idcategory=intval($_GET["idcategory"]);
 $sql="
  SELECT `id`,`name`
  FROM `categories`
  WHERE `parent`='{$idcategory}'
  ORDER BY `name`
 ";

 $db = mysql_connect($DBhost, $DBuser, $DBpass);
 mysql_select_db($DBName);
 mysql_query("SET NAMES UTF8");

 $result = mysql_query($sql);
 mysql_close($db);

 //Формирование строки данных в формате JSON
 $return="";
 while ($row = mysql_fetch_array($result,MYSQL_BOTH)){
  $return.="{value:'{$row["id"]}', caption:'{$row["name"]}'} ,";
 }
 //Исключение запятой стоящей в конце строки
 $return=substr($return,0,(strlen($return)-1));
 $return="[{$return}]";

 print $return;
}
?>

Переменная $return формирует строку с данными в формате JSON:

[{
{value:"1",caption:"Аудио, видео техника"},
{value:"3",caption:"Бытовая техника для дома"},
….
{value:"10",caption:"Компьютерная техника и ПО"}
}]

jQuery

Рассмотрим jQuery скрипт, задача которого с помощью функции $.ajax() запросить у сервера данные, а затем создать и заполнить выпадающий список.
Разместите в заголовке документа или создайте отдельный скриптовой js файл и поместите в него следующее сценарий:

<script type="text/javascript">
$(function(){

 //Первоначальная загрузка корневых категорий
 getCategory(0);
 
});

function getCategory(idcategory){
 $.ajax({
  url:"getCategory.php",
  cache:false,
  data:{idcategory:idcategory},
  success:function(data){

   //Создание объекта формата JSON
   var optionsObj=eval( "("+data+")" );

   //Проверка на непустой объект
   if (!$.isEmptyObject(optionsObj)){

    //Создание элемента select
    $("#selectBox").append("<select size='15'></select>");

    //Ссылка на созданный select
    var select=$("#selectBox select:last");

    //Итерация объекта optionsObj, с последующим наполнение элемента select опциями
    $.each(optionsObj, function(i, val) {
     select.append("<option value='"+ val.value +"'>"+ val.caption +"</option>");
    });

    // События для созданного select
    select.change(function(){

     //Удаление последующих категорий
     $(this).nextAll().remove();

     //Зацикливание
     getCategory($(this).val())
    });

   }else{
    //Информирует пользователя если подкатегорий, для выбранной категории не существует
    $("#selectBoxInfo").html("Подкатегорий, для выбранной категории не существует").
    fadeIn(1500,function(){
     $(this).fadeOut(1500);
    });
   }
  }
 });
}
</script>

Добавлено: 23 Февраля 2015 06:16:47 Добавил: Андрей Ковальчук Нравится 0

Добавить