Установка дефолтного значения в HTML <select>: решение

Быстрый ответ

Хотите сделать определённый <option> выбранным по умолчанию в элементе <select>? Просто примените к нему атрибут selected:

<select>
  <option value="1">Один</option>
  <option value="2" selected>Два</option> <!-- "По умолчанию выбран этот элемент" -->
  <option value="3">Три</option>
</select>

В данном случае опция "Два" будет отображаться как значение по умолчанию.

Улучшение UX с помощью использования заполнительного текста

Заполнитель в роли неактивной опции значительно улучшит UX. Для этого вам потребуется комбинация атрибутов disabled, hidden и value="". Вот пример:

<select>
  <option value="" disabled selected hidden>Пожалуйста, сделайте выбор</option> <!-- "Я — невидимка 👻, меня выбрать не удастся!" -->
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

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

Как в React задать значение по умолчанию

В React значение по умолчанию для элемента <select> устанавливается иначе. Для этого используется атрибут value на самом элементе <select>. Его значение должно совпадать со значением <option>:

<select value={this.state.selectedValue} onChange={this.handleChange}>
  <option value="1">Один</option>
  <option value="2">Два</option> <!-- "Два — это наш выбор 😉" -->
  <option value="3">Три</option>
</select>

Для управления состоянием в функциональном компоненте или при работе с React Hooks можно использовать хук useState.

Визуализация

Можно представить аналогию: задание значения по умолчанию для элемента <select> – это будто вы зарезервировали себе место в ряду кинокресел в кинотеатре:

Выбор места в кинозале:
[🎦] [🎦] [🎦] **[🎟️]** [🎦] [🎦]

Здесь <select> – это ряд кресел, а options – это отдельные кресла в этом ряду.

<select>
  <option value="1">Кресло 1</option>
  <option value="2">Кресло 2</option>
  <option value="3" selected>Кресло 3</option> <!-- "Бронироание Кресла 3 выполнено! 🚀" --> 
  <option value="4">Кресло 4</option>
</select>

Когда страница загружается, ваше зарезервированное кресло (Кресло 3) отображается как выбранное!

Распространенные ошибки и пути их устранения

Ниже приведены обычные ошибки и способы избежания их:

Трудности с атрибутом 'selected'

Не забывайте, что атрибут selected должен быть добавлен к элементу <option>, а не к элементу <select>. Распространённая ошибка — добавление value к <select> для установки значения по умолчанию здесь не подходит. [SecondParagraphVideo]

'В начале списка' — не просто словосочетание

Помещайте самые часто выбираемые опции в начало списка, сразу после заполнителя — это облегчит взаимодействие пользователя. Например, если "Два" часто выбирается:

<select>
  <option value="" disabled selected hidden>Выберите число</option>   <!-- "Я — заполнитель, меня выбрать нельзя! 😄" -->
  <option value="2">Два</option>
  <option value="1">Один</option>
  <option value="3">Три</option>
</select>

Не позвольте заполнителю создавать препятствия при отправке формы

Неактивный (disabled) заполнитель гарантирует, что он не будет отправляться как часть данных формы, так как браузеры игнорируют неактивные <option> внутри <select>.

Дополнительные практики и полезные светы

Чтобы улучшить взаимодействие пользователя со значениями по умолчанию, рассмотрите следующее:

Приоритетность и доступность для улучшения UX

С точки зрения доступности очень важно ориентироваться на основные опции. Приоритизация в этом контексте существенно помогает.

Совместимость с разными браузерами и устройствами

Убедитесь, что ваши опции, выбранные по умолчанию, хорошо отображаются на различных устройствах, проведя тщательное тестирование на разных разрешениях экрана.

Очистка после выбора

Рассмотрите возможность скрытия заполнителя после успешного выбора, чтобы поддерживать чистоту интерфейса. Это можно сделать с помощью JavaScript, добавив CSS-класс, который назначает display: none для выбранного заполнителя.

Полезные материалы

1. <select>: The HTML Select element – HTML: HyperText Markup Language | MDN — Обширные материалы MDN о элементе <select>.
2. Set the select option as blank as default in HTML select element – Stack Overflow — Обсуждение того, как устанавливать значение по умолчанию.
3. Tutorial | DigitalOcean — Учебник по созданию HTML-форм, включающий использование элементов <select>.
4. WebAIM: Creating Accessible Forms – Accessible Form Controls — Лучшие практики по созданию доступных элементов формы, таких как <select>.
5. HTML – select Tag — Краткое руководство из TutorialsPoint с примерами использования HTML <select> тега.