chevron-left chevron-right

[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

  • Demo nic nie zawiera, pusta strona ;/

  • Piotr Nalepa

    dzięki za zwrócenie uwagi
    link został naprawiony 🙂

  • Sławek

    Czy była by możliwość udostępnienia całego skryptu ?

  • Piotr Nalepa

    postaram się udostępnić

  • nie dziala demo

    Niestety nie działa demo, nie ma linka: {filelink=1}

  • Piotr Nalepa

    demo działa, a linka nie ma już – zrezygnowałem z pewnych rozwiązań

  • Łukasz

    Takie pytanie a jest możliwość że po wybraniu np „kategoria 2” pojawia sie nowa lista, po wybraniu z tej listy np „kategoria 2.2” i kliknieciu buttona otwierała się jakas strona? bo w takim stanie to ma małe zastosowanie

  • Piotr Nalepa

    To jest tylko przykład implementacji rozwiązania, który można sobie odpowiednio dopasować do własnych potrzeb. Taki był cel tego artykułu, pokazać jak osiągnąć dany efekt. Do webmastera należy zadanie dopasowania rozwiązania do swoich potrzeb.