{"id":14123,"url":"\/distributions\/14123\/click?bit=1&hash=b6e903e3d37a75b3ce21c7d8036af3f9c1ea573e20186cb3e2d1cadd4d177ad0","title":"\u041a\u0430\u043a \u0441\u0442\u0430\u0442\u044c \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u043f\u043e \u043e\u0445\u0440\u0430\u043d\u0435 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0440\u0435\u0434\u044b","buttonText":"","imageUuid":""}

8 июн 2022 8.06.2022

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

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

0 показов

156 открытий

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

<option selected disabled></option>

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

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

<option selected disabled hidden></option>

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

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

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

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

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

Код на Codeopen.

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

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

Денис

{"id":1210467,"url":"https:\/\/vc.ru\/u\/1210467-webfrontden","name":"webfrontden","avatar":"ac085456-f72f-59eb-925d-7ffedf4f7861","karma":0,"description":"\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u0435\u043d\u0438\u0441! \u042f \u0438\u0437\u0443\u0447\u0430\u044e \u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0438 \u0442\u0443\u0442 \u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0441\u0432\u043e\u0439 \u043f\u0443\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043f\u0443\u0442\u0435\u043c \u0440\u0430\u0437\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0443\u0437\u043d\u0430\u044e!","isMe":false,"isSubscribed":false,"isNotificationsEnabled":false,"isShowMessengerButton":false,"isShowSubscribe":true,"hasBadge":false,"badgeType":null,"badgeUuid":null,"badgeUrl":null,"hasVideoAvatar":false}

Комментарии

Написать комментарий...

-3 комментариев

Раскрывать всегда

{
                                "tabs": [{"label":"\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Main","isRecommendations":true},{"label":"ChatGPT","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 ChatGPT","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=ChatGPT"},{"label":"\u041f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Travel","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=\u041f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u0435 || \u041f\u043e\u0435\u0437\u0434\u043a\u0430 || \u0411\u0438\u043b\u0435\u0442 || \u041e\u0442\u0435\u043b\u044c || \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f || \u041f\u0435\u0440\u0435\u0435\u0437\u0434"},{"label":"AR & VR","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 ARVR","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=AR || VR"},{"label":"Midjourney","isActive":false,"gaEvent":"Recommendations \u2014 Tab \u2014 Midjourney","searchUrl":"\/search\/v2\/themes?order_by=new&strict=true&rating=10,null&query=Midjourney"}],
                                "contentId": 438970                            }