Исполняемые доки HTML: Выпадающий список

Q: Как сделать выпадающий список в HTML?

Используйте с одним на каждый вариант: Red Blue . Дайте select name и .

Q: Как задать вариант по умолчанию в select?

Добавьте этому варианту selected: Blue . Без него выбран первый вариант. В JavaScript присвойте select.value = 'blue'.

Q: Как добавить заглушку (placeholder) в select?

Сделайте первый вариант пустым и недоступным для выбора: Choose a country . Добавьте атрибут required, чтобы форму нельзя было отправить, пока не выбран настоящий вариант.

Q: Как получить выбранное значение select в JavaScript?

select.value это значение выбранного варианта. Его видимый текст дает select.selectedOptions[0].text, а чтобы реагировать на смену выбора, слушайте событие change. Для select с множественным выбором переберите select.selectedOptions.

Q: Чем select отличается от datalist?

разрешает только перечисленные варианты. с предлагает варианты, пока читатель печатает, но принимает любой текст. Используйте select, когда ответ должен быть одним из ваших вариантов.

Как сделать выпадающий список в HTML

Выпадающий список это элемент <select> с <option> для каждого варианта. value каждого варианта это то, что отправляет форма; текст между тегами это то, что видит читатель. Выберите вариант и нажмите 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>

Форма отправляет language=js: name списка и value выбранного варианта. selected задает вариант по умолчанию; без него выбран первый. Если у варианта нет value, вместо него отправляется текст.

Свяжите подпись со списком через for и id (или обернув его), чтобы клик по подписи ставил фокус на список, а программы чтения с экрана его объявляли.

Атрибуты select и option

Элемент	Атрибут	Что делает
`<select>`	`name`	Ключ, под которым отправляется значение
`<select>`	`required`	Нужно выбрать настоящий вариант, а не пустую заглушку в начале
`<select>`	`multiple`	Можно выбрать несколько вариантов
`<select>`	`size`	Сколько строк видно (превращает список в поле со списком)
`<select>`	`disabled`	Весь список выключен и не отправляется
`<option>`	`value`	Что отправляется, когда вариант выбран
`<option>`	`selected`	Вариант выбран при загрузке страницы
`<option>`	`disabled`	Вариант виден, но выбрать его нельзя
`<optgroup>`	`label`	Заголовок группы

Вариант-заглушка с required

У select всегда есть значение, поэтому без заглушки отправится первый настоящий вариант, даже если читатель ни разу не открыл список. Пустой первый вариант это исправляет, а required останавливает отправку, пока не выбран настоящий вариант:

<!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>

Нажмите Continue, ничего не выбрав: браузер откажется и попросит выбрать элемент. У заглушки value="", и именно это required считает пустым значением, а disabled не дает выбрать ее снова, когда страна уже выбрана.

Группы вариантов через optgroup

<optgroup label="..."> ставит заголовок над набором вариантов. Сам заголовок выбрать нельзя:

<!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>

Группы нельзя вкладывать друг в друга: у списка только один уровень заголовков. disabled у <optgroup> отключает все варианты внутри.

Множественный выбор

multiple позволяет выбрать несколько вариантов и превращает выпадающий список в поле со списком. Удерживайте Ctrl (Cmd на Mac), чтобы добавлять варианты по одному, или Shift, чтобы выбрать диапазон:

<!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>

Форма отправляет skills=html и skills=css: одно и то же имя для каждого выбранного варианта. Многие не знают про Ctrl+клик, поэтому при небольшом количестве вариантов группой чекбоксов пользоваться проще.

Чтение и установка значения в JavaScript

select.value читает и задает значение выбранного варианта, а событие change срабатывает, когда читатель выбирает другой вариант. Частое применение: второй список, варианты которого зависят от первого:

<!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) создает вариант. select.selectedIndex это позиция выбранного варианта, а select.selectedOptions перечисляет выбранные, и именно так читают select с множественным выбором.

Оформление select

Раскрытый список рисуют браузер и операционная система, и оформить его можно лишь частично. Закрытое поле можно: appearance: none убирает стандартную стрелку, а фоновое изображение ставит на ее место вашу:

<!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>

Дополнительный отступ в конце оставляет место для стрелки, чтобы длинный текст варианта не заходил под нее. font: inherit здесь так же важен, как у кнопок: по умолчанию select использует мелкий шрифт форм браузера. Варианты в раскрытом списке сохраняют стандартный вид. Chrome позволяет оформлять и раскрытый список, если включить это через appearance: base-select; браузеры без такой поддержки показывают стандартный список. Полный контроль везде дает только собственный виджет на ARIA, а сделать его правильно намного сложнее, чем кажется.

select, радиокнопки или datalist?

Что использовать	Когда
`<select>`	Один выбор из длинного списка или когда мало места
Радиокнопки	Один выбор из нескольких вариантов, которые должны быть видны все сразу (см. радиокнопка в HTML)
`<input>` с `<datalist>`	Подсказки, но разрешено любое введенное значение

Частые ошибки

Нет заглушки при обязательном выборе. Первый настоящий вариант отправляется, даже если читатель его не выбирал.
Заглушка с настоящим значением, например value="none". required считает это корректным выбором. Используйте value="".
Варианты без value, когда текст длинный или переводится. Сервер получает видимый текст, который меняется вместе с языком.
multiple для нескольких вариантов. Чекбоксами пользоваться проще.
Обработчик click у вариантов. Используйте change у <select>; оно срабатывает и при изменении с клавиатуры.
Нет подписи. У select только с заглушкой пропадает название, как только выбран вариант.

Часто задаваемые вопросы

Как сделать выпадающий список в HTML?

Используйте <select> с одним <option> на каждый вариант: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. Дайте select name и <label>.

Как задать вариант по умолчанию в select?

Добавьте этому варианту selected: <option value="blue" selected>Blue</option>. Без него выбран первый вариант. В JavaScript присвойте select.value = 'blue'.

Как добавить заглушку (placeholder) в select?

Сделайте первый вариант пустым и недоступным для выбора: <option value="" disabled selected>Choose a country</option>. Добавьте <select> атрибут required, чтобы форму нельзя было отправить, пока не выбран настоящий вариант.

Как получить выбранное значение select в JavaScript?

select.value это значение выбранного варианта. Его видимый текст дает select.selectedOptions[0].text, а чтобы реагировать на смену выбора, слушайте событие change. Для select с множественным выбором переберите select.selectedOptions.

Чем select отличается от datalist?

<select> разрешает только перечисленные варианты. <input> с <datalist> предлагает варианты, пока читатель печатает, но принимает любой текст. Используйте select, когда ответ должен быть одним из ваших вариантов.

Связанные концепции