по умолчанию выберите опцию как пустую
У меня есть очень странное требование, в котором я должен не иметь опции, выбранной по умолчанию в выпадающем меню в HTML. Однако,
Я не могу использовать это,
<select>
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
потому что для этого мне придется сделать проверку для обработки первого варианта. Может ли кто-нибудь помочь мне в достижении этой цели без фактического включения первого варианта в качестве части тега select?
11 ответов:
может быть, это будет полезно
<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">так что он больше не будет отображаться в списке.
вы можете использовать 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);
сегодня (2015-02-25)
это допустимый HTML5 и отправляет пустой (не пробел) на сервер:
<option label=" "></option>проверенная валидность на http://validator.w3.org/check
проверил поведение с Win7(в IE10 в IE11 ИЕ8 ИЕ9 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) на Android(Samsung-Галактики-С5)
далее также проходит проверку , но проходит какой-то символ пробела тоже сервер из большинства браузеров (наверное, не желательно) и Пробел на других (Chrome40 / Linux пропускает пробел):
<option> </option>ранее (2013-08-02)
согласно моим заметкам, объект неразрывного пространства внутри тегов опций, показанных выше, вызвал следующую ошибку в 2013 году:
ошибка: обслуживание разметки W3C проверку (публичных): первого ребенка вариант элемент элемента select с обязательным атрибутом и без него множественный атрибут, и чей размер равен 1, должен иметь либо пустой значение атрибута или не должно иметь текстового содержимого.
в то время, обычный пробел был допустим XHTML4 и послал пустой (не пробел) на сервер из каждого браузера:
<option> </option>будущее
это заставило бы мое сердце радоваться, если бы спецификация была обновлена, чтобы явно разрешить пустую опцию. Желательно использовать самый краткий синтаксис. Любое из следующих было бы здорово:
<option /> <option></option>
<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>просто поместите "скрытый" на опцию, которую вы хотите скрыть в выпадающем списке.
решение, которое работает только с помощью 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>
<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>в этом случае можно избежать пользовательской проверки.
использовать jQuery:
//With jQuery 1.7.2 $("#myDropdown").attr("selectedIndex", -1);пробовал и тестировал для jQuery v1.7.2 (последняя версия по состоянию на апрель. 18th, 2012), однако "prop" не работает для этой версии.
нет никакого HTML-решения. По спецификации HTML 4.01 поведение браузера не определено, если ни один из
optionэлементы имеетselectedатрибут, и то, что браузеры делают на практике, заключается в том, что они предварительно выбирают первый вариант.в качестве обходного пути, вы могли бы заменить
selectэлемент по наборуinput type=radioэлементы (с теми же ). Это создает элемент управления того же рода, хотя с различным внешним видом и пользовательским интерфейсом. Если ни один изinput type=radioэлементы имеетcheckedатрибут, ни один из них изначально не выбран в большинстве современных браузеров.
Я использую Laravel 5 framework и ответ @Gambi также работал для меня, но с некоторыми изменениями для моего проекта.
У меня есть значения параметров в таблице базы данных, и я использую их с помощью оператора foreach. Но перед заявлением я добавил опцию с @ Gambit предлагаемыми настройками, и это сработало.
вот мой пример:
@isset($keys) <select> <option disabled selected value></option> @foreach($keys as $key) <option>{{$key->value)</option> @endforeach </select> @endissetЯ надеюсь, что это тоже кому-то поможет. Продолжайте в том же духе!
попробуйте это:
<h2>Favorite color</h2> <select name="color"> <option value=""></option> <option>Pink</option> <option>Red</option> <option>Blue</option> </select>первый вариант в выпадающем списке будет пустым.
попробуйте это:
<select> <option value=""> <option>Option 1 <option>Option 2 <option>Option 3 </select>проверяет в HTML5. Работает с
requiredатрибут в элементе select. можете быть повторно выбран. Работает в Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.
Comments