[jQuery]Zależne listy rozwijane z wykorzystaniem jQuery
Ten wpis ma 15 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Problem, którego rozwiązanie zostanie dzisiaj zaprezentowane, będzie dotyczył zależnych list rozwijanych. Zależne listy rozwijane, to są odrębne select listy, których zawartość jednego z nich jest zależna od drugiego. Często taki mechanizm można spotkać na stronach typu e-commerce lub na stronach producentów sterowników, gdzie produkty lub sterowniki są podzielone na kategorie i podkategorie. W jednej liście znajdują się główne kategorie serwisu, a w drugiej dynamicznie generowane podkategorie.
Sekcja 1Kod HTML
Na początek musimy przygotować początkową strukturę HTML strony, która obejmie formularz z jedną listą rozwijaną.
<!-- index.php -->
<form action="select.php" id="formularz" action="post">
<fieldset>
<legend>Kategorie</legend>
<select id="kategorie">
<option value="1">Kategoria 1</option>
<option value="2">Kategoria 2</option>
<option value="3">Kategoria 3</option>
<option value="4">Kategoria 4</option>
</select>
</fieldset>
</form>
Sekcja 2Kod PHP
Kolejnym krokiem jest przygotowanie kodu PHP do którego będzie się odwoływał kod JavaScript (opisany w dalszej części artykułu). Będzie to prosty kod, który ma zobrazować zachowanie strony.
// select.php
if(!empty($_GET['id'])) {
$id = $_GET['id'];
switch($id) {
case 1:
$tab = array(
'11'=>'Kategoria 1.1',
'12'=>'Kategoria 1.2',
'13'=>'Kategoria 1.3'
);
echo json_encode($tab);
break;
case 2:
$tab = array(
'21'=>'Kategoria 2.1',
'22'=>'Kategoria 2.2',
'23'=>'Kategoria 2.3',
'24'=>'Kategoria 2.4'
);
echo json_encode($tab);
break;
case 3:
$tab = array(
'31'=>'Kategoria 3.1',
'32'=>'Kategoria 3.2'
);
echo json_encode($tab);
break;
case 4:
$tab = array(
'41'=>'Kategoria 4.1',
'42'=>'Kategoria 4.2',
'43'=>'Kategoria 4.3'
);
echo json_encode($tab);
break;
default:
$tab = array('0'=>'Brak');
echo json_encode($tab);
break;
}
}
W powyższym kodzie zastosowano funkcję json_encode która konwertuje tablicę do postaci JSON (która jest typu string), co pozwoli na wykorzystanie tej tablicy przez kod JS odpowiedzialny za tworzenie dynamicznie generowanych podkategorii.
Sekcja 3Kod JS z wykorzystaniem biblioteki jQuery
W tej części zostanie omówiona najważniejsza część składowa strony, która generuje dynamicznie dodatkową listę rozwijaną. Jest to kod JavaScript napisany w oparciu o biliotekę jQuery.
//select.js
//skrypt będzie uruchamiany gdy strona się całkowicie załaduje
$(document).ready(function() {
//przypisanie akcji wywołania dodatkowej listy do zdarzenia typu change
$('#kategorie').live('change', function(){
var id = $(this).val();
//adres url do pliku PHP z kodem generującym dane w formacie JSON
var url = 'select.php?id='+id;
//jeśli istnieje już select-lista o id: podkategorie, to usuń ją
if($('#podkategorie').length>0)
$('#podkategorie').remove();
//metoda pobierająca dane JSON z podanego adresu w zmiennej url
$.getJSON(
url,
function(data){
//tworzymy nową, pustą listę select o id: podkategorie i ją dołączamy do formularza
select = '<select id="podkategorie"></select>';
$('#formularz fieldset').append(select);
var lista = $('#podkategorie');
//ukrywamy listę. Potrzebne to będzie do uzyskania animacji pojawienia się elementu na stronie
lista.hide();
//generowanie kolejnych opcji listy
$.each(data, function(key, val){
var option = $('<option/>');
option.attr('value', key)
.html(val)
.appendTo(lista);
});
//animacja pojawienia się elementu na stronie
lista.show('scale', 500);
},
'json'
);
})
})
Należy również pamiętać o tym, aby do kodu strony dołączyć bibliotekę jQuery oraz bibliotekę jQuery UI (ona dodaje efektowne animacje). Bez tych dwóch rzeczy skrypt nie zadziała.
Sekcja 4Podsumowanie
Mam nadzieję, że udało mi się w prosty sposób przedstawić jak można uzyskać zależnych "select-list" z kategoriami i podkategoriami, i dzięki temu będziesz mógł/mogła uatrakcyjnić swoją stronę o nową funkcjonalność.
Demo z tego artykułu można zobaczyć pod tym adresem: dynamicznie generowane zależne listy rozwijane jQuery
Obrazek do tego artykułu został wykonany przy pomocy narzędzia Pixlr Online
O autorze
