Создаем последовательный выбор с помощью AJAX

Порой на некоторых сайта можно встретить последовательный выбор для некоторой информации, зачастую этот выбор достаточно прост, в данном уроке мы рассмотрим как можно скрасить данный элемент сайта с помощью некоторых весьма интересных приемов. Выбор категорий будет приводить к обновлению страницы, показывая пользователю дополнительные элементы для уточнения. Опции выбора описаны с помощью PHP, поэтому будет просто переделать пример на использование базы данных. Данный элемент выбора будет отлично выглядеть на сайте..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Демонстрационная страница не использует элемент браузера. Потому что мы подключаем плагин jQuery Chosen для преобразования нашего элемента в стильный виджет, который вы видите на экране. Нужно просто вызвать метод chosen() для элемента select, а все остальное сделает плагин. И так, начнем с разметки, следует заметить, что элемент выбора имеет заголовок, который описывает выбираемый параметр. Заголовок и элемент выбора заключены в элемент LI:

</pre>
&nbsp;
<ul>
<ul>
	<li>
Что желаете купить?
<select data-placeholder="Выберите категорию продукта"> <option value="Phones" data-connection="phoneSelect">Телефоны</option></select>
<select data-placeholder="Выберите категорию продукта"> <option value="Notebooks" data-connection="notebookSelect">Ноутбуки</option></select>
<select data-placeholder="Выберите категорию продукта"> <option value="Tablets" data-connection="tabletSelect">Планшеты</option></select></li>
</ul>
</ul>
&nbsp;
<pre>

</pre>

<ul>

<li>

Что желаете купить?

<select data-placeholder="Выберите категорию продукта"> <option value="Phones" data-connection="phoneSelect">Телефоны</option></select>

<select data-placeholder="Выберите категорию продукта"> <option value="Notebooks" data-connection="notebookSelect">Ноутбуки</option></select>

<select data-placeholder="Выберите категорию продукта"> <option value="Tablets" data-connection="tabletSelect">Планшеты</option></select></li>

</ul>

<pre>

Следует заметить, что при добавлении вопросов дополнительные элементы LI создается кодом jQuery. Все они располагаются в неупорядоченном списке #questions. Заголовок и опции данных пунктов обрабатываются как JSON, что будет видно в части PHP.

Теперь рассмотрим, что делает код jQuery — он получает информацию для элемента выбора в виде JSON с сервера, генерирует разметку HTML и устанавливает обработчики событий для отслеживания изменений. Если элемент выбора меняется, то процесс повторяется с новыми пунктами.

$(function(){

	var questions = $('#questions');

	function refreshSelects(){
		var selects = questions.find('select');

		// Улучшаем элемент selects с помощью плагина Chose
		selects.chosen();

		// Ждем изменений
		selects.unbind('change').bind('change',function(){

			// Выбранная опция
			var selected = $(this).find('option').eq(this.selectedIndex);
			// Ищем атрибут data-connection
			var connection = selected.data('connection');

			// Удаляем следующий контейнер li (к=если есть)
			selected.closest('#questions li').nextAll().remove();

			if(connection){
				fetchSelect(connection);
			}

		});
	}

	var working = false;

	function fetchSelect(val){

		if(working){
			return false;
		}
		working = true;

		$.getJSON('ajax.php',{key:val},function(r){

			var connection, options = '';

			$.each(r.items,function(k,v){
				connection = '';
				if(v){
					connection = 'data-connection="'+v+'"';
				}

				options+= ''+k+'';
			});

			if(r.defaultText){

		// Плагин Chose требует, чтобы был добавлен пустой элемент опции
	        // если нужно выводить текст "Пожалуйста, выберите"

				options = ''+options;
			}

			// Строим разметку для раздела select

$('</pre>
<ul>
	<li>\

'+r.title+'

\
<select data-placeholder="'+r.defaultText+'">\</select>
<select data-placeholder="'+r.defaultText+'"> '+ options +'\</select>

\
\</li>
</ul>
<pre>
').appendTo(questions);

			refreshSelects();

			working = false;
		});

	}

	$('#preloader').ajaxStart(function(){
		$(this).show();
	}).ajaxStop(function(){
		$(this).hide();
	});

	// В начале загружаем выбор продукта
	fetchSelect('productSelect');
});

$(function(){

var questions = $('#questions');

function refreshSelects(){

var selects = questions.find('select');

// Улучшаем элемент selects с помощью плагина Chose

selects.chosen();

// Ждем изменений

selects.unbind('change').bind('change',function(){

// Выбранная опция

var selected = $(this).find('option').eq(this.selectedIndex);

// Ищем атрибут data-connection

var connection = selected.data('connection');

// Удаляем следующий контейнер li (к=если есть)

selected.closest('#questions li').nextAll().remove();

if(connection){

fetchSelect(connection);

}

});

}

var working = false;

function fetchSelect(val){

if(working){

return false;

}

working = true;

$.getJSON('ajax.php',{key:val},function(r){

var connection, options = '';

$.each(r.items,function(k,v){

connection = '';

if(v){

connection = 'data-connection="'+v+'"';

}

options+= ''+k+'';

});

if(r.defaultText){

// Плагин Chose требует, чтобы был добавлен пустой элемент опции

// если нужно выводить текст "Пожалуйста, выберите"

options = ''+options;

}

// Строим разметку для раздела select

$('</pre>

<ul>

<li>\

'+r.title+'

<select data-placeholder="'+r.defaultText+'"> '+ options +'\</select>

\</li>

</ul>

<pre>

').appendTo(questions);

refreshSelects();

working = false;

});

}

$('#preloader').ajaxStart(function(){

$(this).show();

}).ajaxStop(function(){

$(this).hide();

});

// В начале загружаем выбор продукта

fetchSelect('productSelect');

});

Как можно заметить в данном коде используется две функции JavaScript:

refreshSelects запускает плагин Chosen и привязывает обработчики событий каждый раз, когда новый пункт добавляется на страницу;
fetchSelect запрашивает фид JSON с сервера и генерирует разметку для ответа.

Теперь осталось сделать генерацию фида JSON. Обратите внимание, что функция fetchSelect получает в качестве аргумента строку. Это ключ, который передается в код PHP, обозначающий, какой набор пунктов нам требуется.

{
    "items": {
        "Телефоны": "phoneSelect",
        "Ноутбуки": "notebookSelect",
        "Планшеты": ""
    },
    "title": "Что желаете купить?",
    "defaultText": "Выберите категорию продукта"
}

{

"items": {

"Телефоны": "phoneSelect",

"Ноутбуки": "notebookSelect",

"Планшеты": ""

"title": "Что желаете купить?",

"defaultText": "Выберите категорию продукта"

}

В данном примере функция fetchSelect проходит циклом все пункты и использует ключи как содержание элементов опций, а значения — как указатели на следующие пункты. Выбор пунктов «Телефоны» и «Ноутбуки» в данном примере будет приводить к генерации новых элементов выбора, а пункта «Планшеты» — нет.

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

ajax.php

// Будем использовать данный класс для определения каждого элемента select

class SelectBox{
	public $items = array();
	public $defaultText = '';
	public $title = '';

	public function __construct($title, $default){
		$this->defaultText = $default;
		$this->title = $title;
	}

	public function addItem($name, $connection = NULL){
		$this->items[$name] = $connection;
		return $this;
	}

	public function toJSON(){
		return json_encode($this);
	}
}

// Будем использовать данный класс для определения каждого элемента select

class SelectBox{

public $items = array();

public $defaultText = '';

public $title = '';

public function __construct($title, $default){

$this->defaultText = $default;

$this->title = $title;

}

public function addItem($name, $connection = NULL){

$this->items[$name] = $connection;

return $this;

}

public function toJSON(){

return json_encode($this);

}

Далее нам нужно только создать экземпляр данного класса для каждого элемента выбора и вызвать метод addItem() для добавления опций. Данный метод имеет опциональный параметр $connection, который содержит имя зависимого элемента выбора.

ajax.php

/* конфигурация элементов select */

// Продукт

$productSelect = new SelectBox('Что желаете купить?','Выберите категорию продукта');
$productSelect->addItem('Телефоны','phoneSelect')
			  ->addItem('Ноутбуки','notebookSelect')
			  ->addItem('Планшеты','tabletSelect');

// Типы телефонов

$phoneSelect = new SelectBox('Какой тип телефона вы хотите?', 'Выберите тип телефона');
$phoneSelect->addItem('Смартфон','smartphoneSelect')
			->addItem('Обычный телефон','featurephoneSelect');

// Смартфоны

$smartphoneSelect = new SelectBox('Какой смартфон вам нужен?','Выберите модель смартфона');
$smartphoneSelect->addItem('Samsung Galaxy Nexus')
				 ->addItem('iPhone 4S','iphoneSelect')
				 ->addItem('Samsung Galaxy S2')
				 ->addItem('HTC Sensation');

// Обычные телефоны

$featurephoneSelect = new SelectBox('Какой телефон вам нужен?','Выберите модель телефона');
$featurephoneSelect->addItem('Nokia N34')
				   ->addItem('Sony Ericsson 334')
				   ->addItem('Motorola');

// Цвет iPhone

$iphoneSelect = new SelectBox('Какой цвет аппарата вам нравится?','Выберите цвет');
$iphoneSelect->addItem('Белый')->addItem('Черный');

// Выбор ноутбука

$notebookSelect = new SelectBox('Какой ноутбук вы хотите купить?', 'Выберите модель ноутбука');
$notebookSelect->addItem('Asus Zenbook','caseSelect')
			   ->addItem('Macbook Air','caseSelect')
			   ->addItem('Acer Aspire','caseSelect')
			   ->addItem('Lenovo Thinkpad','caseSelect')
			   ->addItem('Dell Inspiron','caseSelect');

// Планшет

$tabletSelect = new SelectBox('Какой планшет является предметом вашей мечты?', 'Выберите модель планшета');
$tabletSelect->addItem('Asus Transformer','caseSelect')
			 ->addItem('Samsung Galaxy Tab','caseSelect')
			 ->addItem('iPad 16GB','caseSelect')
			 ->addItem('iPad 32GB','caseSelect')
			 ->addItem('Acer Iconia Tab','caseSelect');

// Сумка

$caseSelect = new SelectBox('Возьмёте защитный чехол к вашему аппарату?','');
$caseSelect->addItem('Да')->addItem('Нет');

// Регистрируем все пункты выбора в массиве

$selects = array(
	'productSelect'			=> $productSelect,
	'phoneSelect'			=> $phoneSelect,
	'smartphoneSelect'		=> $smartphoneSelect,
	'featurephoneSelect'	=> $featurephoneSelect,
	'iphoneSelect'			=> $iphoneSelect,
	'notebookSelect'		=> $notebookSelect,
	'tabletSelect'			=> $tabletSelect,
	'caseSelect'			=> $caseSelect
);

/* конфигурация элементов select */

// Продукт

$productSelect = new SelectBox('Что желаете купить?','Выберите категорию продукта');

$productSelect->addItem('Телефоны','phoneSelect')

->addItem('Ноутбуки','notebookSelect')

->addItem('Планшеты','tabletSelect');

// Типы телефонов

$phoneSelect = new SelectBox('Какой тип телефона вы хотите?', 'Выберите тип телефона');

$phoneSelect->addItem('Смартфон','smartphoneSelect')

->addItem('Обычный телефон','featurephoneSelect');

// Смартфоны

$smartphoneSelect = new SelectBox('Какой смартфон вам нужен?','Выберите модель смартфона');

$smartphoneSelect->addItem('Samsung Galaxy Nexus')

->addItem('iPhone 4S','iphoneSelect')

->addItem('Samsung Galaxy S2')

->addItem('HTC Sensation');

// Обычные телефоны

$featurephoneSelect = new SelectBox('Какой телефон вам нужен?','Выберите модель телефона');

$featurephoneSelect->addItem('Nokia N34')

->addItem('Sony Ericsson 334')

->addItem('Motorola');

// Цвет iPhone

$iphoneSelect = new SelectBox('Какой цвет аппарата вам нравится?','Выберите цвет');

$iphoneSelect->addItem('Белый')->addItem('Черный');

// Выбор ноутбука

$notebookSelect = new SelectBox('Какой ноутбук вы хотите купить?', 'Выберите модель ноутбука');

$notebookSelect->addItem('Asus Zenbook','caseSelect')

->addItem('Macbook Air','caseSelect')

->addItem('Acer Aspire','caseSelect')

->addItem('Lenovo Thinkpad','caseSelect')

->addItem('Dell Inspiron','caseSelect');

// Планшет

$tabletSelect = new SelectBox('Какой планшет является предметом вашей мечты?', 'Выберите модель планшета');

$tabletSelect->addItem('Asus Transformer','caseSelect')

->addItem('Samsung Galaxy Tab','caseSelect')

->addItem('iPad 16GB','caseSelect')

->addItem('iPad 32GB','caseSelect')

->addItem('Acer Iconia Tab','caseSelect');

// Сумка

$caseSelect = new SelectBox('Возьмёте защитный чехол к вашему аппарату?','');

$caseSelect->addItem('Да')->addItem('Нет');

// Регистрируем все пункты выбора в массиве

$selects = array(

'productSelect' => $productSelect,

'phoneSelect' => $phoneSelect,

'smartphoneSelect' => $smartphoneSelect,

'featurephoneSelect' => $featurephoneSelect,

'iphoneSelect' => $iphoneSelect,

'notebookSelect' => $notebookSelect,

'tabletSelect' => $tabletSelect,

'caseSelect' => $caseSelect

);

Выше мы рассмотрели код который определяет несколько элементов выбора и размещает их в массиве $selects. Когда скрипт получает запрос AJAX, он просматривает данный массив и возвращает ответ:

ajax.php

// Будем просматривать данный массив и возвращать выбранный объект в зависимости
// от парметра $_GET['key'] передаваемого jQuery

// Вы можете модифицировать код для выбора результата из таблицы

if(array_key_exists($_GET['key'],$selects)){
	header('Content-type: application/json');
	echo $selects[$_GET['key']]->toJSON();
}
else{
	header("HTTP/1.0 404 Not Found");
	header('Status: 404 Not Found');
}

// Будем просматривать данный массив и возвращать выбранный объект в зависимости

// от парметра $_GET['key'] передаваемого jQuery

// Вы можете модифицировать код для выбора результата из таблицы

if(array_key_exists($_GET['key'],$selects)){

header('Content-type: application/json');

echo $selects[$_GET['key']]->toJSON();

}

else{

header("HTTP/1.0 404 Not Found");

header('Status: 404 Not Found');

}

Когда мы вызываем метод toJSON() мы выводим все данные для элементов выбора в формате JSON, который используется клиентской частью jQuery. Вот и все, код достаточно большой, но не такой тяжелый как кажется на первый взгляд. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Создаем последовательный выбор на AJAX

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи