это код файла test.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style/search.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<title>Tutotial: jQuery, Ajax, PHP - создание каскада динамических списков</title>
<script type="text/javascript">
(function($){
/* Очищаем select */
$.fn.clearSelect = function() {
return this.each(function(){
/* Проверяем является ли элемент select`ом */
if(this.tagName=='SELECT') {
this.options.length = 0;
/* Блокируем на время заполнения */
$(this).attr('disabled','disabled');
}
});
}
/* Удаляем старшие элементы */
$.fn.clearField = function(selector) {
/**
* Ищем все элементы следующие за вызывавшим
* и удовлеторяющие переданному селектору
*/
this.nextAll(selector).remove();
return this;
}
/* Заполняем select переданными данными */
$.fn.fillSelect = function(dataArray) {
return this.clearSelect().each(function(){
/* Проверяем является ли элемент select`ом */
if(this.tagName=='SELECT') {
var currentSelect = this;
/* Добавляем пунтк меню "Выбрать..." */
var start = new Option('Выбрать...', '-1');
/* Устанавливаем этот option первым в списке */
if($.support.cssFloat) {
currentSelect.add(start,null);
} else {
currentSelect.add(start);
}
$.each(dataArray,function(index,data){
/* Если определено 'name' */
if(data.name) {
/* Создаем новый option */
var option = new Option(data.name,data.id);
/* Добавляем новый option к select`у */
if($.support.cssFloat) {
currentSelect.add(option,null);
} else {
currentSelect.add(option);
}
}
});
/* Выделяем первый элемент списка */
$(this).removeAttr('disabled').find('option:first').attr('selected', 'selected');
}
});
}
})(jQuery);
/* Функция отсылает ajax-запрос */
function getCategory(pcategory, level) {
$.ajax({
url: 'ajax/list.php',
type: 'POST',
data: 'pcategory='+ pcategory +'&level='+ level,
dataType: 'JSON',
beforeSend: function(){
// Блокируем все необходимы select`ы
$('select[name^=category_]').attr('disabled', 'disabled');
},
complete: function(){ // Снимаем блокировку
$('select[name^=category_]').removeAttr('disabled');
},
success: function(response){
var data = eval('(' + response +')');
// Если количество категорий в ответе 0 либо не определено
if(data.count === 'undefined' || data.count == 0) {
// просто удаляет старшие уровни каскада
$('select[name=category_'+ (data.level - 1) +']')
.clearField('select[name^=category]')
.clearField('span');
return false;
}
if( $('select[name=category_'+ data.level +']').length ) {
// Если select этого уровня уже существует
// мы должны удалить все старшие select`ы,
// очистить старые данные и заполнить новым контентом
$('select[name=category_'+ data.level +']')
.clearField('select[name^=category]')
.clearField('span')
.fillSelect(data.item);
} else {
// Если select этого уровня не существует,
// мы должны его создать и заполнить данными
$('#categories select:last').after('<span>></span> <select name="category_'+ data.level +'"></select>');
$('select[name=category_'+ data.level +']').fillSelect(data.item);
}
/* Сбрасываем старый обработчик */
$('select[name=category_'+ data.level +']').unbind('change');
/* Вешаем новый */
$('select[name=category_'+ data.level +']').change(function(){ return clickEvent($(this)); });
return false;
},
error: function(){
// Сообщаем пользователю, что произошла ошибка
$('#msg').append('<p>Some error with categories. Please, try later ;)</p>');
return false;}
});
}
/* Добавляем обработчик событий при изменении пункта списка */
function clickEvent(select)
{
var id = select.find('option:selected').attr('value');
/**
* Если id=-1, значит выбран пункт "Выбор.."
* значит мы должны просто очистить старшие списки
*/
if (id == '-1') {
select.clearField('select[name^=category]').clearField('span');
return false;
}
var level = parseInt(select.attr('name').replace('category_', '')) + 1;
return getCategory(id, level);
}
$(document).ready(function(){
/* Развешиваем обработчики */
//$('select[name^=category] option').live("click", function(){
// var select = $(this).parents('select');
// var level = parseInt(select.attr('name').replace('category_', '')) + 1;
// return getCategory(select.find('option:selected').attr('value'), level);
//})
/* Получаем список категорий */
getCategory(0, 0);
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Пример динамического каскада списков:</h1>
<div id="searchQuery">
<form name="search" action="" method="post">
<table width="973" bgcolor="#f2f2f2" border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td width="218"> </td>
<td width="735" align="right">Обрезанная форма для поиска :)</td>
</tr>
<tr>
<td><div align="right">
<div align="right">Категория:</div>
</div></td>
<td id="categories">
<select name="category_0">
</select>
</td>
</tr>
</tbody>
</table>
</form>
<p> </p>
</div>
<div id="msg">
<h1>Сообщения о возможных ошибках: </h1>
</div>
</body>
<html>
код list.php
/* Если это не AJAX.. умираем :) */
if( $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest')
die( 'Request Error!' );
/**
* @var array Здесь содержаться названия категорий:
* [идентификатор категории] => 'название'
*/
$categories = array(
'x0' => 'Компьютерная техника', 'x1' => 'Персональные компьютеры',
'x2' => 'Windows', 'x3' => 'Athlon', 'x4' => 'Celeron',
'x5' => 'Pentium', 'x6' => 'Macintosh', 'x7' => 'Прочее',
'x8' => 'Ноутбуки', 'x9' => 'КПК', 'x10' => 'Периферийные устройства',
's0' => 'Бытовая техника', 's1' => 'Аудио-аппаратура',
's2' => 'Фотоаппараты', 's3' => 'Микроклиматическое оборудование',
's4' => 'Вентиляторы', 's5' => 'Кондиционеры', 's6' => 'Оконные',
's7' => 'Навесные', 's8' => 'Обогреватели', 'k0' => 'Офисное оборудование',
'k1' => 'Копировальная техника', 'k2' => 'Факсы'
);
/**
* @var array В этом массиве мы храним идентификаторы
* родительских категорий. '0' означает, что
* категория не имеет родительской
* @see $categories
*/
$levels = array(
'x0' => '0', 'x1' => 'x0',
'x2' => 'x1', 'x3' => 'x2', 'x4' => 'x2',
'x5' => 'x2', 'x6' => 'x1', 'x7' => 'x1',
'x8' => 'x0', 'x9' => 'x0', 'x10' => 'x0',
's0' => '0', 's1' => 's0',
's2' => 's0', 's3' => 's0',
's4' => 's3', 's5' => 's3', 's6' => 's5',
's7' => 's5', 's8' => 's0', 'k0' => '0',
'k1' => 'k0', 'k2' => 'k0'
);
$pcategory = $_POST['pcategory'] ? $_POST['pcategory'] : 0;
$level = $_POST['level'] ? $_POST['level'] : 0;
$list = array();
/**
* @var array Промежуточный массив идентификаторов категорий
*/
$result = array();
/**
* Получаем идентификаторы нужных нам категорий
* @see http://www.php.net/array_keys
*/
foreach( array_keys($levels, $pcategory) as $value)
$result[] = array('id'=>$value, 'name'=>$categories[$value]);
/* Заносим категории в результирующий массив */
if(count($result))
$list['item'] = $result;
/* Указываем дополнительные параметры */
$list['count'] = count($result);
$list['level'] = $level;
/* Явно указываем формат данных */
header('Content-type: application/json');
/**
* Преобразуем в массив в JSON
* @see http://www.php.net/json_encode
*/
echo json_encode($list);
