Некоторое время назад в нашем блоге публиковался пост о том, как сделать зависимые списки на JQuery/Ajax. В той статье был опубликован пример реализации двух списков, т.е. кода один список имеет зависимость от другого. Очевидно, для задач со списками более двух пришлось переделать скрипт, чтобы получить желаемый результат.
По этой теме ранее в комментариях был задан вопрос, о том, как реализовать 3 зависимых списка, при котором третий зависит от второго, второй от первого. В общем, пробуем делать 3 списка с зависимостями. Первым делом меняем структуру массива, в которых хранились наши данные, такой метод хранения позволит реализовать сколько угодно вложенностей в дальнейшем.
Допустим, у нас есть данные такой структуры:
BMW --5-series ----518 ----525 ----530 --7-series ----720 ----730 ----740 ----750 Mercedes-Benz --C-класс ----C 160 ----C 180 --E-класс ----C 200 ----E 220 ----E 230
В массиве разбиваем данные списка на уровни, плюс дополнительный параметр parent, который будет указывать на ключ в родительском списке.
$arParams = array(
'models' => array(
0 => 'BMW',
1 => 'Mercedes-Benz'
),
'series' => array(
0 => array('value' => '5-series' ,'parent' => 0),
1 => array('value' => '7-series' ,'parent' => 0),
2 => array('value' => 'C-класс', 'parent' => 1),
3 => array('value' => 'E-класс', 'parent' => 1),
),
'modif' => array(
0 => array('value' => '518', 'parent' => 0),
1 => array('value' => '525', 'parent' => 0),
2 => array('value' => '530', 'parent' => 0),
3 => array('value' => '720', 'parent' => 1),
4 => array('value' => '730', 'parent' => 1),
5 => array('value' => '740', 'parent' => 1),
6 => array('value' => '740', 'parent' => 1),
7 => array('value' => 'C 160', 'parent' => 2),
8 => array('value' => 'C 180', 'parent' => 2),
9 => array('value' => 'C 230', 'parent' => 2),
10 => array('value' => 'E 200', 'parent' => 3),
11 => array('value' => 'C 220', 'parent' => 3),
12 => array('value' => 'C 230', 'parent' => 3),
)
);
Как и прежде, отдавать данные форме мы будет в ajax формате, однако в скрипте ajax.php пришлось сделать кардинальные изменения. Для получения данных скрипту нужно передать два параметра, listName и id. В listName передается параметр, который указывает на ключ массива, из которого запрашиваются элементы, в нашем примере это series – запрос серий модели и modif – запрос модификаций серии. Параметр id – указывает значение ключа в родительском списке.
<?php
require_once('cars.php');
$arResult = array();
if (isset($_GET['listName']) &&
array_key_exists($_GET['listName'],$arParams) &&
isset($_GET['id']) && is_numeric($_GET['id'])){
foreach ($arParams[$_GET['listName']] as $id => $arItems){
if ($arItems['parent'] == $_GET['id'])
$arResult[$id] = $arItems;
}
}
echo json_encode ($arResult);
?>
Кроме того, сама форма так же поменялась:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<select name="models" onchange="loadCar('models','series')">
<option>Модель</option>
<?php
require_once('cars.php');
foreach ($arParams['models'] as $mid => $model)
echo '<option value="' . $mid . '">' . $model . '</option>' . "\n";
?>
</select>
<select name="series" onchange="loadCar('series','modif');"><option>Серия</option></select>
<select name="modif"><option>Модификация</option></select>
<script>
function loadCar(parent,child){
parentSel = $('select[name="'+parent+'"] option:selected');
childSel = $('select[name="'+child+'"]');
switch (parent){
case 'models':
$('select[name="series"]').html('<option>Серия</option>');
$('select[name="modif"]').html('<option>Модификация</option>');
break;
case 'series':
$('select[name="modif"]').html('<option>Модификация</option>');
break;
}
if (isInt(parentSel.val())){
$.getJSON('ajax.php', {
listName:child,
id:parentSel.val()
}, function(Items){
$.each(Items, function(i){
childSel.append('<option value="'+i+'">' + this.value + '</option>');
});
});
}
}
function isInt(n){ return n % 1 === 0; }
</script>
Добавить комментарий