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



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



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



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


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

435   11  

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>&#160;</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="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

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

Comments

    Ничего не найдено.