Добавление placeholder в dropdown списке Bootstrap

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

Для создания плейсхолдера выпадающего списка в Bootstrap, применяйте атрибуты selected, disabled к элементу option со значением value, равным "" (пустые кавычки) внутри select:

<select class="form-select">
  <option value="" disabled selected>Выберите...</option>
  <!-- Пространство для прочих пунктов -->
</select>

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

Дополнительная информация о плейсхолдерах

Способ скрытия плейсхолдера из списка

Добавьте атрибут hidden, чтобы плейсхолдер не отображался в открытом списке, сохраняя при этом свою функциональность:

<select class="form-select">
  <option value="" disabled selected hidden>Выберите...</option>
  <!-- Дополнительные варианты -->
</select>

Подробнее об этом расскажет наш спикер на видео

Динамические плейсхолдеры с помощью jQuery

Используйте jQuery для создания адаптивного плейсхолдера:

$('#mySelect').on('change', function () {
  // Добавляем данной функции интерактивность 🌈
  if (!this.value)
    $(this).addClass('placeholder'); // Элемент становится серым...
  else
    $(this).removeClass('placeholder'); // ...и снова приобретает цвет!
});

Данный код изменяет стиль элемента в зависимости от того, был ли совершен выбор, добавляя или удаляя класс placeholder.

Конфигурация плейсхолдера через selectpicker

Для selectpicker возможно установить текст плейсхолдера при инициализации используя параметр noneSelectedText:

$('.selectpicker').selectpicker({
  noneSelectedText: 'Выберите без лишнего стресса...'
});

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

Представьте выпадающий список Bootstrap как волшебную шапку-сортировщик из мира Хогвартса 🧙‍♂️:

Выберите факультет [🎭 Плейсхолдер]
|-----------------------------|
| 🦅 Рейвенкло                |
| 🦁 Гриффиндор               |
| 🐍 Слизерин                 |
| 🦡 Хаффлпафф                |

И когда выбор сделан, "шапка" объявляет:

Выбрано: 🦁 Гриффиндор

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

Расширенные функциональные возможности плейсхолдера

Стилизация плейсхолдера

Примените стили для выделения первого элемента <option> в качестве плейсхолдера:

.form-select .placeholder {
  color: gray; /* Намек на неопределенность при выборе */
}

Альтернативный плейсхолдер через title

В качестве упрощенного варианта вы можете задать title:

<select class="form-select">
  <option title="placeholder" selected>Выберите что-нибудь</option>
  <!-- Остальные варианты для выбора -->
</select>

Использование плейсхолдеров в мультиселектах

Плейсхолдер должен работать и в мультиселектах:

<select class="selectpicker" multiple data-none-selected-text="Ничего не выбрано">
  <!-- Место для ваших предпочтений -->
</select>

Совместимость с разными версиями Bootstrap

Приспосабливайтесь к различиям в версиях Bootstrap, следуя актуальной документации.

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

1. Dropdowns · Bootstrap — официальная документация по созданию выпадающих списков в Bootstrap.
2. How to Create Dropdown Menu with Bootstrap 5 – Tutorial Republic — руководство по созданию выпадающих списков Bootstrap.
3. Styling a Select Like It’s 2019 | CSS-Tricks — советы по эффектной стилизации элементов <select>.
4. <select>: The HTML Select element – HTML: HyperText Markup Language | MDN – обстоятельное руководство по элементу <select> от MDN.
5. Getting Started | bootstrap-select · SnapAppointments Developer — введение в плагин bootstrap-select.
6. Select · Bootstrap v5.0 — подробное руководство по работе с элементами выпадающего списка в Bootstrap 5.
7. <option>: The HTML Option element – HTML: HyperText Markup Language | MDN — детальное описание тега <option> для выпадающих списков.