[jQuery]Zależne listy rozwijane z wykorzystaniem jQuery

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.

Kod 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>

Tak przygotowany kod HTML można odpowiednio ozdobić kodem CSS, wedle własnego uznania.

Kod 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;
    }
}

Powyższy kod zakłada, że zmienna $_GET istnieje i nie ma potrzeby definiowania sytuacji, gdy jednak ta zmienna nie istnieje, a jest odwołanie do tego pliku.
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.

Kod 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'
        );
    })
})

Wydaje mi się, że powyższy kod został dobrze wytłumaczony i nie powinien nikomu sprawić problemu. Należy zwrócić uwagę na to, że w tym przypadku do pobrania danych typu JSON jest wykorzystana metoda getJSON(), w której następuje dynamiczne generowanie kontrolki na stronie.
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.

Podsumowanie

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