Lista rozwijana w HTML krok po kroku

Ewa Klimowicz

27 grudnia, 2023

3 min

• Praca w IT
• Artykuły

Ostatnia aktualizacja 27 grudnia, 2023

Lista rozwijana to powszechny element interfejsu użytkownika. Znajdzie swoje zastosowanie w każdej usłudze, w której mamy do czynienia z różnymi wariantami opcji do wyboru. Umożliwia ona użytkownikowi szerszy wybór bez zajmowania zbyt dużej przestrzeni na ekranie. W tym artykule omawiamy sposób tworzenia list rozwijanych w HTML i dzielimy się konkretnymi przykładami kodu dla różnych konfiguracji list.

• Listy rozwijane HTML umożliwiają użytkownikom wybór jednej opcji z wielu, zachowując przy tym minimalizm i efektywność przestrzenną na stronie internetowej.
• Możliwość grupowania opcji przy użyciu <optgroup>, personalizacji wyglądu przez CSS oraz integracji z JavaScript dla dynamicznych reakcji, czyni listy rozwijane niezwykle wszechstronnymi w konfiguracji.
• Stosując CSS i JavaScript, programiści mogą znacząco poprawić użyteczność list rozwijanych, dostosowując je do potrzeb użytkowników i estetyki strony internetowej.

Lista rozwijana w HTML – podstawy

Listy rozwijane, znane również jako elementy <select> w HTML, są używane do tworzenia menu z wieloma opcjami. Użytkownik może wybrać jedną opcję, a lista zwija się po dokonaniu wyboru. Element <select> zawiera jeden lub więcej elementów <option>, które reprezentują dostępne wybory.

<select>
  <option value="opcja1">Opcja 1</option>
  <option value="opcja2">Opcja 2</option>
  <option value="opcja3">Opcja 3</option>
</select>

Grupowanie opcji

Dla lepszego porządkowania opcje w liście rozwijanej można grupować za pomocą elementu <optgroup>. Każda grupa może mieć etykietę, która służy do organizacji opcji.

<select>
  <optgroup label="Grupa 1">
    <option value="opcja1">Opcja 1</option>
    <option value="opcja2">Opcja 2</option>
  </optgroup>
  <optgroup label="Grupa 2">
    <option value="opcja3">Opcja 3</option>
    <option value="opcja4">Opcja 4</option>
  </optgroup>
</select>

Atrybuty listy rozwijanej HTML

Lista rozwijana może mieć różne atrybuty, takie jak multiple dla wielokrotnego wyboru lub size do określenia liczby jednocześnie wyświetlanych opcji.

<select multiple>
  <option value="opcja1">Opcja 1</option>
  <option value="opcja2">Opcja 2</option>
  <option value="opcja3">Opcja 3</option>
</select>

Stylizowanie listy rozwijanej

Choć listy rozwijane są domyślnie stylizowane przez przeglądarkę, można je dostosować za pomocą CSS, aby lepiej pasowały do designu strony.

Przykład CSS:

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

Dalsza część tekstu znajduje się pod materiałem wideo:

Integracja z JavaScript

Listy rozwijane często współpracują z JavaScriptem, aby umożliwić dynamiczne działania, m.in. zmianę zawartości strony w zależności od wybranej opcji.

Przykład kodu JavaScript:

document.querySelector('select').addEventListener('change', function() {
  alert('Wybrano opcję: ' + this.value);
});

Ten fragment kodu JavaScript używa funkcji document.querySelector i addEventListener do dodania obsługi zdarzeń do elementu listy rozwijanej (<select>) w dokumencie HTML. Omówmy każdy element tego kodu krok po kroku:

1. document.querySelector('select'):
   • document: odnosi się do całego dokumentu HTML.
   • querySelector('select'): jest metodą, która zwraca pierwszy element w dokumencie pasujący do podanego selektora CSS. W tym przypadku selektor 'select' wskazuje na pierwszy element <select> (listę rozwijaną) w dokumencie.
2. .addEventListener('change', function() { ... });:
   • addEventListener: jest metodą używaną do przypisania obsługi zdarzeń do elementu. Pozwala ona zdefiniować, co powinno się stać, gdy określone zdarzenie wystąpi w elemencie.
   • 'change': jest typem zdarzenia, które jest monitorowane. W tym przypadku kod nasłuchuje zdarzenia zmiany (change), co oznacza, że funkcja zostanie wywołana, gdy użytkownik zmieni wybraną opcję w liście rozwijanej.
   • function() { ... }: jest funkcją zwrotną (callback), która zostaje wywołana, gdy zdarzenie change wystąpi. Wewnątrz tej funkcji określone jest, co ma się stać, gdy użytkownik zmieni wybór w liście rozwijanej.
3. Wewnątrz funkcji zwrotnej:
   • alert('Wybrano opcję: ' + this.value);: Ta linia wyświetla okno dialogowe z komunikatem (alert).
   • this: w kontekście funkcji zwrotnej this odnosi się do elementu, który wywołał zdarzenie, czyli do elementu <select>.
   • this.value: pobiera wartość aktualnie wybranej opcji w liście rozwijanej.
   • 'Wybrano opcję: ' + this.value: tworzy łańcuch tekstowy, który łączy frazę “Wybrano opcję: ” z wartością wybranej opcji, a następnie wyświetla ten tekst w oknie dialogowym alert.

Czytaj także:

Jak zrobić stronę internetową w HTML-u?

ul w HTML – tworzenie i stylizacja list nieuporządkowanych