Как убрать пустой тег Option в Select

В данной мини статье, для начинающих изучать веб-разработку, описывается то, как сделать меню выбора (тег Select) пустым по умолчанию и скрыть пустой тег Option в меню выбора опций.

Если вам необходимо создать выпадающий список (тег select), у которого по умолчанию не выбрано ничего, то вам достаточно создать тег option и прописать ему атрибуты html selected disabled.

<option selected disabled></option>

Отображение выпадающего списка без атрибута hidden
Отображение выпадающего списка без атрибута hidden

Если вы хотите, чтобы в вариантах выбора пустой option не было видно, самым оптимальным вариантом будет дописать тегу атрибут hidden.

<option selected disabled hidden></option>

Отображение выпадающего списка с атрибутом hidden
Отображение выпадающего списка с атрибутом hidden

Существует также способ скрытия пустого тега option в вариантах выбора с помощью css, для этого тегу option пропишите в стилях display:none;

P.s Инлайновые стили использовались лишь для демонстрации, в обычных проектах пожалуйста используйте каскадные таблицы стилей (css)

Отображение выпадающего списка без атрибута hidden и без display: none;
Отображение выпадающего списка без атрибута hidden и без display: none;
Отображение выпадающего списка без атрибута hidden и с display: none;
Отображение выпадающего списка без атрибута hidden и с display: none;

Если у вас остались вопросы, критика или комментарии - обязательно напишите мне, я с радостью отвечу вам.

А сейчас я прощаюсь и желаю вам хорошего дня!

Денис

Начать дискуссию