В данной мини статье, для начинающих изучать веб-разработку, описывается то, как сделать меню выбора (тег Select) пустым по умолчанию и скрыть пустой тег Option в меню выбора опций.
Если вам необходимо создать выпадающий список (тег select), у которого по умолчанию не выбрано ничего, то вам достаточно создать тег option и прописать ему атрибуты html selected disabled.
<option selected disabled></option>
Если вы хотите, чтобы в вариантах выбора пустой option не было видно, самым оптимальным вариантом будет дописать тегу атрибут hidden.
<option selected disabled hidden></option>
Существует также способ скрытия пустого тега option в вариантах выбора с помощью css, для этого тегу option пропишите в стилях display:none;
P.s Инлайновые стили использовались лишь для демонстрации, в обычных проектах пожалуйста используйте каскадные таблицы стилей (css)
Если у вас остались вопросы, критика или комментарии - обязательно напишите мне, я с радостью отвечу вам.
А сейчас я прощаюсь и желаю вам хорошего дня!
Денис
Комментарии (9)
k12th
08.06.2022 17:50+1Пустой селект выглядит как-то неопрятно, имхо. Лучше показывать что-то вроде "пожалуйста, выберите вариант" или хотя бы прочерк.
webfrontden Автор
08.06.2022 18:11В целом вы правы и с заполнителем было бы лучше, но в ходе этой работы, придерживался макета, где в дизайне по умолчанию select пустой. Иммено поэтому, кстати, я и столкнулся с проблемой пустого тега Option в вариантах выбора. А чтобы решение можно было найти легче (я нашел его не сразу), и написал статью
vanyas
08.06.2022 19:26+2Серьёзно? Статья из двух скиншотов, да ещё и такого качества, что там текст сструдом читается?
SunUp
09.06.2022 10:38+3<option selected disabled hidden></option>
Есть нативный атрибут hidden и не надо тут стили тем более инлайнwebfrontden Автор
09.06.2022 14:11-1Спасибо, что написали про атрибут hidden, информацию про него добавил в статью.
Кстати, инлайновые стили использовались для более удобной демонстрации кода в скриншоте. На всякий случай, также указал в статье, что в обычном проекте инлайнами пользоваться определенно не стоит.
yar3333
Чёрт, 15 лет программинга, даже вопрос такой не вставал. Это как с бородой, которую не понятно куда класть - поверх одеяла или под него. :) В итоге: большинстве проектов мы просто не используем нативные select-ы. :))
webfrontden Автор
На самом деле пока и представить себе не могу, какие методы реализации идей используются на других уровнях разработки. Приятно осознавать, что есть огромный горизонт для изучения.
Но в этой статье я как раз и описал решение неочевидной для себя, с высоты моей колокольни, вещи. Оно нацелено на начинающих, и надеюсь будет полезно тем, кто, как и я, недавно начал изучать web-разработку.
webfrontden Автор
Кстати, Habr я как раз начал вести из-за того, что хочу облегчить, изучение программирования другим. Чтобы решать вопросы и проблемы, которые могут возникнуть в ходе обучения.
Жалко, конечно, что на данный момент у моих статей низкий технический уровень материала, но в будущем он будет расти. Так как и мой уровень в разработке с изучением станет выше, и проблемы, которые я буду решать и освещать для других, станут более сложными и интересными
P.s Про кастомные select-ы почитаю