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>