459

У меня очень странное требование, в соответствии с которым я не должен выбирать опцию по умолчанию в раскрывающемся меню в HTML. Однако,

Я не могу использовать это,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Развернуть фрагмент

Потому что для этого мне придется сделать проверку для обработки первого варианта. Может ли кто-нибудь помочь мне в достижении этой цели без фактического включения первого параметра в тег select?

html

— Панкадж Парашар
источник

2

Насколько я знаю, это единственный способ получить пустую строку. Что вы имеете в виду, что вам придется сделать проверку? Просто установите флажок, чтобы сказать, если значение = "", а затем вернуть ложь.

— Роберт

1

Это было бы хорошей возможностью использовать радиокнопки вместо выпадающего списка.

— Blazemonger

9

На мой взгляд, это не странное требование. Я в одной лодке. Мне также нужен вариант по умолчанию. У меня есть несколько выпадающих меню, которые не требуются для отправки формы. Отключение их таким образом предотвращает необходимость выбора пользователем, когда это не имеет отношения к делу. Хороший вопрос! +1

— Скотт

Не странное требование, если SELECT имел атрибут REQUIRED,

— Testo

Радиокнопки @Blazemonger - ужасная идея, если у вас их больше 3 или 4. Представьте себе выпадающий список с 15+ вариантами или 50 или более? Те , имеют свои собственные проблемы проектирования , во многих случаях , но вопрос до сих пор стоит , что радио - кнопка не очень хорошо масштабируется на всех .

— TylerH

1015

Может быть, это будет полезно

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

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

Вы также можете скрыть это с помощью добавления пустого option

<option style="display:none">

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

Вариант 2

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

<option hidden disabled selected value> -- select an option -- </option>

— гамбит
источник

15

Вот JSFiddle из вышеперечисленного , на случай, если это кому-нибудь понадобится.

— Уве Кейм

26

@azerafati как @Rafael_Mori указал, что вы можете архивировать то же самое, используя атрибут «скрытый», поэтому CSS не требуется. Просто чистый HTML5;)<option hidden disabled selected value> -- select an option -- </option>

— BrainOverflow

Что если я захочу выбрать его обратно? Я просто не хочу, чтобы это что-то отправляло. Является ли это возможным?

— Майкл Роджерс

1

добавление скрытого атрибута в элемент option сделало для меня чудо! не ожидал, что это будет так просто. спасибо

— С. Доменг

Имейте в виду, что скрытый атрибут и стиль отображения не работают в IE, даже 11. stackoverflow.com/questions/58862242/…

— yatskovsky

113

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

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

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

или JQuery

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

— Matschie
источник

Это решение частично работает с Chrome 35: раскрывающийся список не показывает какого-либо выбора, когда список параметров невидим, но показывает первый параметр, выбранный, когда список параметров становится видимым. Safari 7 ведет себя так, как задумано.

— Флохтилилох

Интересная вещь: это работает с проверкой формы HTML. Если вы используете requiredатрибут в selectэлементе и отправляете без выбора опции, проверка формы завершится неудачно и сообщит вам, что вы должны сделать выбор. Поэтому мне очень нравится этот подход. (По крайней мере, проверено в Chrome)

— Андреас Линнерт

Не работает (по крайней мере, в текущих браузерах на момент написания этой статьи - и без необходимости полагается на javascript.

— silentmouth

1

По состоянию на 2019 год только Safari IOS 10 отказывается играть в мяч с этим

— Ayyash

37

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

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

<option label=" "></option>

Подтверждено действие на http://validator.w3.org/check

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

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

<option>&#160;</option>

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

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

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

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

<option> </option>

Будущее

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

<option />
<option></option>

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

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

— GlenPeterson
источник

15

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>

Развернуть фрагмент

Просто добавьте «скрытый» параметр, который вы хотите скрыть в выпадающем списке.

— Рафаэль Мори
источник

8

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

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

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Развернуть фрагмент

B: таблица стилей CSS

Если у вас есть файл CSS под рукой, вы можете выбрать первый, optionиспользуя:

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Развернуть фрагмент

— Кай Ноак
источник

4

Это должно помочь:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

Развернуть фрагмент

— Рохан Параб
источник

Это самый современный (html5) способ выполнить это требование, учтите, что для этого требуется кнопка type = submit. Кнопка type = с обработчиком отправки onclick не требует от пользователя автоматического выбора.

— Арджан

3

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

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

— Фаваз
источник

2

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

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

<option hidden disabled selected value>(select an option)</option>

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

— Андреас Розек
источник

1

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

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

— Гурьяш Сингх
источник

1

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

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

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

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

Ну вот и все, надеюсь, это поможет. Ура!

— farisfath25
источник

Делать невозможным отправку, но и привлекать внимание пользователя к выпадающему

— списку,

@Lofacture: спасибо за вклад. на самом деле, код, который я написал, был именно тем, что я хотел, но да, как вы сказали, это зависит от потребностей пользователя / владельца

— farisfath25

0

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

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

— Юкка К. Корпела
источник

0

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

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

Вот мой пример:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

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

— LOG Oracle
источник

0

Попробуй это:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

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

— Абхиджит Пай
источник

0

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

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

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

Развернуть фрагмент

— Батри Натан
источник

0

Если вы используете Angular (2+), (или любой другой фреймворк), вы можете добавить некоторую логику. Логика будет такой: отображать пустую опцию, только если пользователь еще не выбрал другую. Таким образом, после того, как пользователь выбрал опцию, пустая опция исчезает.

Для Angular (9) это будет выглядеть примерно так:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

— Майк де Клерк
источник

-2

Попробуй это:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

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

— Тристан Бейли
источник

опция выбора по умолчанию как пустая

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

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

Будущее

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