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

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

383 голосов
/ 22 декабря 2011

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

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

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

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

Ответы [ 15 ]

837 голосов
/ 13 мая 2014

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

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

106 голосов
/ 22 декабря 2011

Вы можете использовать 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);
35 голосов
/ 25 февраля 2015

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

В то время обычным пробелом был действительный 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>
12 голосов
/ 05 октября 2016 

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

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

7 голосов
/ 12 октября 2017

Решение, которое работает только с использованием 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>
3 голосов
/ 16 июля 2017 
<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>

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

0 голосов
/ 15 мая 2019

Небольшое замечание:

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

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

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

0 голосов
/ 01 апреля 2019

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

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

<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 голосов
/ 07 февраля 2019

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

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

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

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

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

0 голосов
/ 08 декабря 2018

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

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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...