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

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

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

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

ОТВЕТЫ

Ответ 1

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

<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>

Ответ 2

Вы можете использовать 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);

Ответ 3

Сегодня (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 Markup Validaton Service (Public): первая дочерняя опция элемент элемента select с требуемым атрибутом и без множественный атрибут и размер которого равен 1, должен иметь либо пустой атрибут value или не должен содержать текстового содержимого.

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

<option> </option>

Future

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

<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>

Ответ 4

<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>

Ответ 5

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

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

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

Ответ 6

<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>

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

Ответ 7

Использовать jQuery:

//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

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

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

Ответ 10

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

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

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

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

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

Ответ 11

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

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

<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>

Ответ 12

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

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

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

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

Ответ 13

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

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

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

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

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

Ответ 14

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

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

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

Ответ 15

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

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>

Ответ 16

Попробуйте следующее:

<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.