Select HTML – Lista Rozwijana

Select – Lista Rozwijana HTML

<select> <option>

Czasem zdarzy się, że będziemy chcieli dodać opcję do wyboru na rozwijanej liście. W tym celu posłuży nam element html o nazwie <select> (ang. wybór). Element <select> musimy uzupełnić o elementy <option> (ang. opcja wyboru), które zawierają możliwe wybory, opcje.

<select>
  <option>Opcja 1</option>
  <option>Opcja 2</option>
  <option>Opcja 3</option>
</select>

Element <select> również wymaga użycia atrybutu value, żeby dane zostały przesłane. Tekst elementu <option> jest zazwyczaj bardziej opisowy od tego co chcemy przesłać formularzem, dlatego często będą one się trochę różnić, w zależności na jakie potrzeby będziemy je wykorzystywać. Formularzem przesłane zostaną jednie dane z atrybutu value.

<select>
  <option value="Panna cotta">Panna cotta 75g</option>
  <option value="Tiramisu">Tiramisu 150g</option>
  <option value="Creme brulle">Creme brulle 100g</option>
</select>

Tak jak w przypadku elementów <input> zawsze warto jest skorzystać z elementu <label>, żebyśmy wiedzieli czego dana lista dotyczy.

<label for="dessert">Deser</label>
<select id="dessert">
  <option value="Panna cotta">Panna cotta 75g</option>
  <option value="Tiramisu">Tiramisu 150g</option>
  <option value="Creme brulle">Creme brulle 100g</option>
</select>

Lista Rozwijana Select – Zaznaczenie Domyślne

selected

Może zdarzyć się, że będziemy chcieli domyślnie zaznaczyć wybrać określoną opcję. Możemy dokonać tego poprzez atrybut selected.

<select>
  <option>Panna cotta 75g</option>
  <option selected>Tiramisu 150g</option>
  <option>Creme brulle 100g</option>
</select>

Lista Rozwijana Select – Multi Zaznaczanie

multiple

Jeśli chcemy zaznaczyć więcej niż jedną opcję, możemy skorzystać z atrybutu multiple przypisywanego do elementu <select>.

<select multiple>
  <option>Panna cotta 75g</option>
  <option>Tiramisu 150g</option>
  <option>Creme brulle 100g</option>
</select>

Wielokrotnego zaznaczania dokonujemy poprzez przytrzymanie klawisza ctrl albo shift i naciśnięcia opcji lewym klawiszem myszki (tak jakbyśmy zaznaczali foldery czy pliki w komputerze).

Lista Rozwijana – Grupowanie Opcji

<optgroup>

Ciekawym rozwiązaniem elementu <select> jest możliowść grupowania opcji poprzez zastosowanie elementu <optgroup> (ang. option group – grupa opcji). Nazwę grupy dodajemy tym razem poprzez atrybut label, a nie jak do tej pory element <label>. Zobaczmy jak to sprytne rozwiązanie działa. Pominiemy atrybuty value, żeby uprościć zapis.

<select>
  <optgroup label="Grupa 1">
    <option>Opcja 1.1</option>
    <option>Opcja 1.2</option>
  </optgroup>
  <optgroup label="Grupa 2">
    <option>Opcja 2.1</option>
    <option>Opcja 2.2</option>
  </optgroup>
</select>
Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.