Html select option please select

По умолчанию выбрать вариант как пустой

— select an option — будет отображаться по умолчанию. Но если вы выберете опцию, вы не сможете выбрать ее обратно.

Вы также можете скрыть это, добавив пустую option

поэтому он больше не будет отображаться в списке.

Если вы не хотите писать CSS и ожидаете такого же поведения решения, описанного выше, просто используйте:

Ответ 2

Вы можете использовать Javascript для достижения этого. Попробуйте следующий код:

 Option 1 Option 2 Option 3  

document.getElementById("myDropdown").selectedIndex = -1; 

$("#myDropdown").prop("selectedIndex", -1); 

Ответ 3

Сегодня (2015-02-25)

Это действительный HTML5 и отправляет пустое (а не пробел) на сервер:

Проверенное поведение с Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Следующее также проходит проверку сегодня, но пропускает какой-то космический символ также сервер из большинства браузеров (возможно, не желательно) и пробел на других (Chrome40/Linux пропускает пробел):

Ранее (2013-08-02)

В соответствии с моими заметками, объект без разбиения пространства внутри тегов опций, показанный выше, в 2013 году произвел следующую ошибку:

Ошибка: W3C Markup Validaton Service (Public): первая дочерняя опция элемент элемента select с требуемым атрибутом и без множественный атрибут и размер которого равен 1, должен иметь либо пустой атрибут value или не должен содержать текстового содержимого.

В это время регулярное пространство было действительным XHTML4 и отправило пустое (а не пробел) на сервер из каждого браузера:

Future

Было бы приятно, если бы спецификация была обновлена, чтобы явно разрешить пустую опцию. Предпочтительно использовать самый короткий синтаксис. Любое из следующих было бы здорово:

Тестовый файл

Ответ 4

Ação da atividade: 
  Instalação Solicitação Retirada 

Ответ 5

Решение, которое работает только с помощью CSS:

A: встроенный CSS

 Option 1 Option 2 Option 3 

Ответ 6

 None Volvo Saab Mercedes Audi  

В этом случае вы можете избежать выборочной проверки.

Ответ 7

//With jQuery 1.7.2 $("#myDropdown").attr("selectedIndex", -1); 

Пробовал и тестировал для jQuery v1.7.2 (последняя версия от 18 апреля 2012 г.), однако «prop» не работает для этой версии.

Ответ 8

Нет HTML-решения. По спецификации HTML 4.01 поведение браузера undefined, если ни один из элементов option не имеет атрибута selected , и что на самом деле делают браузеры, они делают первый вариант предварительно выбранным.

В качестве обходного пути вы можете заменить элемент select на набор элементов input type=radio (с тем же атрибутом name ). Это создает контроль одного и того же типа, но с другим внешним видом и пользовательским интерфейсом. Если ни один из элементов input type=radio не имеет атрибута checked , ни один из них изначально не выбран в большинстве современных браузеров.

Ответ 9

Я понимаю, что вы пытаетесь сделать. Лучший и самый успешный способ:

 None Teaching department Non-teaching department  

Ответ 10

Я нашел это действительно интересным, потому что я испытал то же самое не так давно. Тем не менее, я наткнулся на пример в Интернете о решении по этому поводу.

Без лишних слов, смотрите фрагмент кода ниже:

 --Choose one Option-- Option 1 Option 2 Option 3  

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

Хорошо, что все, я надеюсь, что это помогает. Ура!

Ответ 11

Чтобы отобразить, выберите значение в раскрывающемся списке и скройте его после выбора какого-либо значения. пожалуйста, используйте приведенный ниже код.

это также поддержит требуемую проверку.

 --Please select a value Data 1 Data 2 Data 3 

Ответ 12

Просто небольшое замечание:

некоторые браузеры Safari, похоже, не учитывают ни «скрытый» атрибут, ни настройку стиля «display: none» (протестировано с Safari 12.1 под MacOS 10.12.6). Без явного текста-заполнителя эти браузеры просто показывают пустую первую строку в списке параметров. Поэтому может быть полезно всегда предоставлять пояснительный текст для этой «фиктивной» записи:

Благодаря атрибуту «disabled» он не будет активно выбран в любом случае.

Ответ 13

Я использую фреймворк Laravel 5, и ответ @Gambi помог мне, но с некоторыми изменениями для моего проекта.

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

@isset($keys) @foreach($keys as $key) value) @endforeach @endisset 

Надеюсь, это кому-то тоже поможет. Продолжайте хорошую работу!

Ответ 14

Favorite color
 Pink Red Blue  

Первый вариант в раскрывающемся списке будет пустым.

Ответ 15

  
 None Volvo Saab Mercedes Audi  Submit 

Ответ 16

   Option 1 Option 2 Option 3 

Проверяет в HTML5. Работает с атрибутом required в элементе select. Можно повторно выбрать. Работает в Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

Источник

Html select option please select

Поле выбора значения из раскрывающегося списка.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент используется, когда нужно показать выпадающий список.

Пример

Скопировать ссылку «Пример» Скопировано

   Ваш город  -- Выберите город -- Санкт-Петербург Самара Пермь Новосибирск   form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>    Скопировать Скопировано Не удалось скопировать   

Подробно

Скопировать ссылку «Подробно» Скопировано

В примере выше показано типовое использование элемента . Это своего рода обёртка над списком опций, которые задаются тегом . Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:

• задать тегу атрибут name ;
• задать каждому тегу атрибут value . Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега .

Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу атрибут selected .

Внутри тега могут использоваться только теги и .

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

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

autocomplete

Скопировать ссылку «autocomplete» Скопировано

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

autofocus

Скопировать ссылку «autofocus» Скопировано

Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.

disabled

Скопировать ссылку «disabled» Скопировано

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

form

Скопировать ссылку «form» Скопировано

Атрибут указывает на элемент , с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то обязательно должен находиться внутри тега . Но если задать атрибут, то нахождение внутри формы не обязательно и может находиться в любом месте страницы.

multiple

Скопировать ссылку «multiple» Скопировано

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

name

Скопировать ссылку «name» Скопировано

Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.

required

Скопировать ссылку «required» Скопировано

Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.

size

Скопировать ссылку «size» Скопировано

Числовой атрибут. Если включён атрибут multiple , то это число указывает на количество видимых пунктов списка.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Выбрать несколько элементов списка, когда включён атрибут multiple , можно, используя клавиши Ctrl , Cmd и Shift . Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента , но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.

🛠 Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Вот как можно изменить вид стрелочки:

   Нестандартная стрелочка   -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск    form> label for="city-select">Нестандартная стрелочкаlabel> div class="select-wrapper"> select name="city" id="city-select"> option selected disabled>-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> div> form>    Скопировать Скопировано Не удалось скопировать   

В данном случае мы оборачиваем наш дополнительным блоком, чтобы задействовать псевдоэлемент : : after этого блока. К сожалению, относится к такому типу элементов, у которых нет своих псевдоэлементов : : before и : : after .

 .select-wrapper  position: relative;> .select-wrapper::after  content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none;> select  appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px;> .select-wrapper  position: relative; > .select-wrapper::after  content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none; > select  appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px; >    Скопировать Скопировано Не удалось скопировать   

Используем свойство appearance , чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент : : after от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.

Источник