Деякий час тому в нашому блозі опублікував пост про те, як зробити залежні списки на JQuery/Ajax. В тій статті був опублікований приклад реалізації двох списків, тобто коду один список має залежність від іншого. Очевидно, для завдань зі списками більше двох довелося переробити скрипт, щоб отримати бажаний результат.
По цій темі раніше в коментарях було поставлено питання про те, як реалізувати 3 залежних списку, при якому третій залежить від другого, другий від першого. Загалом, пробуємо робити 3 списку із залежностями. Першим ділом змінюємо структуру масиву, в яких зберігалися наші дані, такий метод зберігання дозволить реалізувати скільки завгодно вложенностей надалі.
Припустимо, у нас є дані такої структури:
BMW
–5-series
—-518
—-525
—-530
–7-series
—-720
—-730
—-740
—-750
Mercedes-Benz
–C-клас
—-160 C
—-180 C
–E-клас
—-200 C
—-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’ => ‘160 C’, ‘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 – вказує значення ключа в батьківській списку.
$arItems){
if ($arItems[‘parent’] == $_GET[‘id’])
$arResult[$id] = $arItems;
}
}
echo json_encode ($arResult);
?>
Крім того, сама форма так само змінилася:
Модель
$model)
echo ” . $model . “. “\n”;
?>
Серія
Модифікація
function loadCar(parent,child){
parentSel = $(‘select[name=”‘+parent+'”] option:selected’);
childSel = $(‘select[name=”‘+child+'”]’);
switch (parent){
case ‘models’:
$(‘select[name=”series”]’).html(‘Серія’);
$(‘select[name=”modif”]’).html(‘Модифікація’);
break;
case ‘series’:
$(‘select[name=”modif”]’).html(‘Модифікація’);
break;
}
if (isInt(parentSel.val())){
$.getJSON(‘ajax.php’, {
listName:child,
id:parentSel.val()
}, function(Items){
$.each(Items, function(i){
childSel.append(” + this.value + “);
});
});
}
}
function isInt(n){ return n % 1 === 0; }
У підсумку можна подивитися ПРИКЛАД того що вийшло, а ось ИСХОДНИКИ прикладу.
Додав: htmaker, 23.03.2015 р.
(4 голосів, середній: 5,00 з 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Коментарі
woodyfon пише:10.08.2015 у 01:44
Як змінити код так, щоб вміст другого і третього списків не виводилося до тих пір, поки не обраний пункт в першому і в другому відповідно? Так буде логічніше.
Відповісти
htmaker пише:10.08.2015 у 15:46
Приклад залежного списку в твоєму випадку. Спочатку додаємо в CSS для вкладених списків значення display:none а вже після js включаємо показ при виборі значень.
Відповісти
Igor пише:03.09.2015 в 21:34
Привіт, як бути якщо використовується value не цілі значення а з роздільником — точкою (реалізація для калькулятора)
‘models’ => array(
‘0’ => ‘BMW’,
‘1’ => ‘Rolls Roys’,
),
‘series’ => array(
‘1.18’ => array(‘value’ => ‘Механіка’,’parent’ => ‘0’),
‘1.15’ => array(‘value’ => ‘Автомат’,’parent’ => ‘0’),
),
‘modif’ => array(
‘0’ => array(‘value’ => ‘2500000руб.’, ‘parent’ => ‘1.18’),
‘1’ => array(‘value’ => ‘1500000руб.’, ‘parent’ => ‘1.15’),
)
Відповісти
htmaker пише:03.09.2015 у 22:01
Привіт, можете описати задачу детальніше?
Відповісти
Igor пише:03.09.2015 в 22:38
У мене калькулятор вважає за значенням value (реалізовано), але не можу реалізувати що б parent дорівнював наприклад 1.15, приклад коду вище
Відповісти
htmaker пише:03.09.2015 в 23:01
Зрозуміло, закоментируйте умова перевірки на цілочисельне значення:
if (isInt(parentSel.val())){
…
См. приклад вище, умова знаходиться на 27 рядку
Відповісти
Igor пише:04.09.2015 в 00:05
Як виявляється елементарне — просто! Спасибі величезне. Удачі і процвітання Вашому блогу!
htmaker пише:04.09.2015 в 00:10
дякую!)
info пише:25.11.2015 в 19:39
Якщо потрібно додати додатковий 4 і 5 залежний список?!
Відповісти
htmaker пише:25.11.2015 в 21:32
Додаєш select з параметрами onchange, а так само новий елемент в масиві PHP.
Відповісти
Олександр пише:11.02.2016 в 14:22
Досить простий і зрозумілий приклад!
Трохи переписати і можна смикати з БД.
Спасибі!
Відповісти
Олександр пише:11.02.2016 в 14:32
cars.php
$q=mysql_query(“SELECT * FROM `cars` WHERE `selector`=’1′ ORDER BY `id` ASC”);
while($f=mysql_fetch_assoc($q)){
$arParams[‘models’][$f[‘id’]] = $f[‘name’];
}
$q=mysql_query(“SELECT * FROM `cars` WHERE `selector`=’2′ ORDER BY `id` ASC”);
while($f=mysql_fetch_assoc($q)){
$arParams[‘series’][$f[‘id’]]=array(‘value’ => $f[‘name’],’parent’ => $f[‘id_pod_menu’]);
}
$q=mysql_query(“SELECT * FROM `cars` WHERE `selector`=’3′ ORDER BY `id` ASC”);
while($f=mysql_fetch_assoc($q)){
$arParams[‘modif’][$f[‘id’]]=array(‘value’ => $f[‘name’],’parent’ => $f[‘id_pod_menu’]);
}
Спасиб ще раз.
Відповісти
Олександр пише:11.02.2016 в 14:34
помилка
WHERE `selector`=’1′
WHERE `selector`=’2′
WHERE `selector`=’3′
Відповісти
Торба пише:15.02.2016 в 17:03
Всім привіт. Виникло питання. При виборі останнього селекта перенаправити на юрл?
Відповісти
Торба пише:15.02.2016 у 18:23
І ще можна приклад дамп бд викласти))
Відповісти
Айнур пише:20.06.2016 у 20:02
Привіт, як реалізувати таку ситуацію у мене кількість селектов відрізняється, десь 3 рівня, десь 5 рівнів. як зробити так, щоб це враховувалося і якщо мало рівнів, то порожні рівні просто не показувалися
Відповісти
htmaker пише:30.06.2016 в 10:22
Айнур, у вашому випадку більш правильно використовувати рекурсію. Перевіряти довжину масиву повертається з сервера, якщо довжина == 0, то не показувати список.
Відповісти
Михайло пише:10.03.2017 в 22:06
Привіт! Респект! Дуже круто і зрозуміло.
Питання таке: я створив залежні списки, все працює. Вношу правки (додаю дані) і при звичайному оновленні дані не підтягуються. Тільки коли скинеш кеш або зайдеш з іншого браузера. Як вирішити цю проблему?
І ще питання, який вже задавали:
При виборі останнього селекта перенаправити на юрл?
Відповісти
htmaker пише:11.03.2017 в 12:33
1. Перегляньте консолі браузера, відбувається запит до скрипта на сервері, можливо виникають помилки на стороні браузера;
2. Пропишіть умова в js для редіректу.
Відповісти
Михайло пише:13.03.2017 в 13:35
1. Виправив. Дякую
2. Мені потрібно зробити як тут: http://www.orafol.com/gp/europe/en/icc-profiles наприкінці з’являється кнопка для скачування профілю за параметрами вище. Щось не доганяю як це реалізувати…
Відповісти
Михайло пише:13.03.2017 в 14:34
Подивися, що я зробив: https://yadi.sk/i/SPVA6CNa3FfSMv
Відповісти
Ігор пише:13.04.2017 у 02:02
Круто ! але от у мене проблемка, вибір марки підвантажується, у другому списку з’являється «Серія» і більше нічого нема… код в стоці лише «require_once» із шляхом в мою папку. Пробував від минулого уроку з двома списками — все відмінно працює, в чому може бути проблема?
Відповісти
