Довольно часто на сайтах встречаются данные, которые можно визуально представить в виде структуры дерева. Дерево по своей структуре предусматривает зависимость одних подчиненных элементов, от других, корневых. Иногда на формах требуется сделать зависимые списки, говоря простым языком, это когда значения одного списка зависят от выбранного значения другого. Для наглядности давайте рассмотрим пример, как можно сделать подобные списки выбора.
Задача такова, на форме должны присутствовать два выпадающих списка. Первый из них будет содержать марки автомобилей, второй будет меняться динамически посредством Ajax запросов, тем самым получая данные по конкретной модели.
Создадим три файла: cars.php, form.php, ajax.php.
В файле cars.php будут храниться данные в виде массива, этот файл нам пригодится для подключения к двум другим файлам. Файл form.php содержит форму со списками, a ajax.php будет обрабатывать Ajax-запросы отправляемые из формы.
Файл cars.php:
<?php $arModels = array( 'BMW' => array( 0 => '1-series', 1 => '2-series', 2 => '3-series', // ... ), 'Mercedes-Benz' => array( 0 => 'A-класс', 1 => 'B-класс', 2 => 'C-класс', // ... ), // и т.д. ); ?>
Ключи массива – это модели автомобилей в нашем представлении, вложенные массивы – серии для конкретных моделей.
Файл form.php:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<select name="model" onchange="loadCar(this)">
<option>Модель</option>
<?php
require_once('cars.php'); // подключаем файл с данными
foreach ($arModels as $model => $series){
echo '<option value="' . $model . '">' . $model . '</option>' . "\n";
}
?>
</select>
<select name="series">
<option>Выберите модель</option>
</select>
<script>
function loadCar(select){
var carSelect = $('select[name="series"]');
$.getJSON('ajax.php', {
action:'getModels',
model:select.value
}, function(seriesList){
carSelect.html('');
$.each(seriesList, function(i){
carSelect.append('<option value="' + i + '">' + this + '</option>');
});
});
}
</script>
Для работы с формой мы будем использовать JQuery фреймворк, который следует подключать перед самой формой. Первый список содержит обработчик события OnChange, он инициализирует код для запроса данных для второго списка.
Файл ajax.php:
<?php
require_once('cars.php'); // подключаем файл с данными
if (isset($_GET['action']) && $_GET['action'] == 'getModels'){ // проверка параметров
if (isset($arModels[$_GET['model']])) // если ключ найден
echo json_encode($arModels[$_GET['model']]); // возвращаем массив с данными
else // иначе
echo json_encode(array('Выберите марку'));
die;
}
?>
Файл, как ранее уже говорилось, будет отвечать на Ajax-запросы, и возвращать результат в формате Json.
Пример и исходники
UPD: В продолжение темы: как реализовать 3 зависимых списка?
Добавить комментарий