Select w HTML: listy rozwijane, option, optgroup i…

Q: Jak zrobić listę rozwijaną w HTML?

Użyj z jednym na każdy wybór: Red Blue . Nadaj elementowi select name i .

Q: Jak ustawić domyślną opcję w select?

Dodaj selected do tej opcji: Blue . Bez niego wybrana jest pierwsza opcja. W JavaScript ustaw select.value = 'blue'.

Q: Jak dodać placeholder do select?

Zrób pierwszą opcję pustą i niemożliwą do wybrania: Choose a country . Dodaj required do , żeby formularza nie dało się wysłać, dopóki nie zostanie wybrana prawdziwa opcja.

Q: Jak odczytać wybraną wartość select w JavaScript?

select.value to wartość wybranej opcji. Jej widoczny tekst to select.selectedOptions[0].text, a zdarzenie change pozwala zareagować na zmianę wyboru. Przy select z wyborem wielokrotnym przejdź przez select.selectedOptions.

Q: Czym różni się select od datalist?

pozwala tylko na opcje z listy. z podpowiada opcje podczas pisania, ale przyjmuje dowolny tekst. Użyj select, gdy odpowiedź musi być jedną z twoich opcji.

Jak zrobić listę rozwijaną w HTML

Lista rozwijana to element <select> z elementem <option> dla każdego wyboru. value każdej opcji to to, co wysyła formularz; tekst między znacznikami to to, co widzi czytelnik. Wybierz jedną i naciśnij Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Formularz wysyła language=js: name elementu select i value wybranej opcji. selected ustawia opcję domyślną; bez niego wybrana jest pierwsza opcja. Jeśli opcja nie ma value, zamiast niego wysyłany jest jej tekst.

Połącz etykietę z listą przez for i id (albo obejmując listę etykietą), żeby kliknięcie etykiety ustawiało fokus na liście, a czytniki ekranu ją ogłaszały.

Atrybuty select i option

Element	Atrybut	Działanie
`<select>`	`name`	Klucz, pod którym wysyłana jest wartość
`<select>`	`required`	Trzeba wybrać prawdziwą opcję, a nie pusty placeholder na początku
`<select>`	`multiple`	Można wybrać kilka opcji
`<select>`	`size`	Ile wierszy jest widocznych (zamienia listę rozwijaną w pole listy)
`<select>`	`disabled`	Cała lista jest wyłączona i nie jest wysyłana
`<option>`	`value`	Co jest wysyłane po jej wybraniu
`<option>`	`selected`	Wybrana po wczytaniu strony
`<option>`	`disabled`	Widoczna, ale nie da się jej wybrać
`<optgroup>`	`label`	Nagłówek grupy

Opcja placeholder z required

Select zawsze ma wartość, więc bez placeholdera wysyłana jest pierwsza prawdziwa opcja, nawet jeśli czytelnik w ogóle nie dotknął listy. Pusta pierwsza opcja to naprawia, a required blokuje wysłanie, dopóki nie zostanie wybrana prawdziwa opcja:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Naciśnij Continue przed wyborem: przeglądarka odmówi i poprosi o wybranie pozycji. Placeholder ma value="", co required traktuje jako pustą wartość, oraz disabled, żeby nie dało się go wybrać ponownie po wybraniu kraju.

Grupowanie opcji przez optgroup

<optgroup label="..."> umieszcza nagłówek nad zestawem opcji. Nagłówka nie da się wybrać:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Grup nie można zagnieżdżać: lista ma jeden poziom nagłówków, nie więcej. disabled na <optgroup> wyłącza wszystkie jego opcje.

Wybór wielokrotny

multiple pozwala czytelnikowi wybrać kilka opcji i zamienia listę rozwijaną w pole listy. Przytrzymaj Ctrl (Cmd na Macu), żeby dodawać opcje pojedynczo, albo Shift, żeby zaznaczyć zakres:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

Formularz wysyła skills=html i skills=css: tę samą nazwę raz dla każdej wybranej opcji. Wiele osób nie zna gestu Ctrl+kliknięcie, więc przy kilku opcjach łatwiejsza w użyciu jest grupa checkboxów.

Odczyt i ustawianie wartości w JavaScript

select.value odczytuje i ustawia wartość wybranej opcji, a zdarzenie change zachodzi, gdy czytelnik wybierze inną opcję. Częste zastosowanie to druga lista, której opcje zależą od pierwszej:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) tworzy opcję. select.selectedIndex to pozycja wybranej opcji, a select.selectedOptions wymienia wybrane opcje; tak odczytuje się select z wyborem wielokrotnym.

Stylowanie select

Rozwiniętą listę rysują przeglądarka i system operacyjny, więc da się ją ostylować tylko w niewielkim stopniu. Zamknięte pole już tak: appearance: none usuwa natywną strzałkę, a obrazek tła wstawia w jej miejsce twoją własną:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

Dodatkowy padding na końcu zostawia miejsce na strzałkę, żeby długi tekst opcji nie wchodził pod nią. font: inherit ma tu takie samo znaczenie jak przy przyciskach: select domyślnie używa małej czcionki formularzy przeglądarki. Opcje w rozwiniętej liście zachowują natywny wygląd. Chrome pozwala ostylować też rozwiniętą listę, gdy włączysz to przez appearance: base-select; przeglądarki bez tej obsługi pokazują natywną listę. Pełna kontrola wszędzie wymaga własnego widżetu zbudowanego z ARIA, co jest dużo trudniejsze do zrobienia dobrze, niż się wydaje.

select, przyciski radio czy datalist?

Użyj	Kiedy
`<select>`	Jeden wybór z długiej listy albo gdy brakuje miejsca
Przycisków radio	Jeden wybór z kilku opcji, które powinny być widoczne naraz (zobacz radio button w HTML)
`<input>` z `<datalist>`	Podpowiedzi, ale dozwolona jest dowolna wpisana wartość

Częste błędy

Brak placeholdera przy wymaganym wyborze. Wysyłana jest pierwsza prawdziwa opcja, nawet jeśli czytelnik jej nie wybrał.
Placeholder z prawdziwą wartością, na przykład value="none". required traktuje go jako poprawny wybór. Użyj value="".
Opcje bez value, gdy tekst jest długi albo tłumaczony. Serwer dostaje widoczny tekst, który zmienia się razem z językiem.
multiple przy kilku opcjach. Checkboxy są łatwiejsze w użyciu.
Nasłuchiwanie click na opcjach. Użyj change na <select>; zachodzi też przy zmianach z klawiatury.
Brak etykiety. Select z samym placeholderem po wybraniu opcji nie ma żadnej nazwy.

Najczęściej zadawane pytania

Jak zrobić listę rozwijaną w HTML?

Użyj <select> z jednym <option> na każdy wybór: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. Nadaj elementowi select name i <label>.

Jak ustawić domyślną opcję w select?

Dodaj selected do tej opcji: <option value="blue" selected>Blue</option>. Bez niego wybrana jest pierwsza opcja. W JavaScript ustaw select.value = 'blue'.

Jak dodać placeholder do select?

Zrób pierwszą opcję pustą i niemożliwą do wybrania: <option value="" disabled selected>Choose a country</option>. Dodaj required do <select>, żeby formularza nie dało się wysłać, dopóki nie zostanie wybrana prawdziwa opcja.

Jak odczytać wybraną wartość select w JavaScript?

select.value to wartość wybranej opcji. Jej widoczny tekst to select.selectedOptions[0].text, a zdarzenie change pozwala zareagować na zmianę wyboru. Przy select z wyborem wielokrotnym przejdź przez select.selectedOptions.

Czym różni się select od datalist?

<select> pozwala tylko na opcje z listy. <input> z <datalist> podpowiada opcje podczas pisania, ale przyjmuje dowolny tekst. Użyj select, gdy odpowiedź musi być jedną z twoich opcji.

Powiązane zagadnienia