Пустой HTML SELECT без пустого элемента в раскрывающемся списке

110

Как реализовать subj?

когда я пишу:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

тогда выбранный элемент по умолчанию - "aaaa"

когда я пишу:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

то по умолчанию выбранный элемент пуст, но этот пустой элемент отображается в раскрывающемся списке.

как я могу реализовать тег SELECT с пустым значением по умолчанию, скрытым в раскрывающемся списке?

Ник Ставрогин
источник
Возможный дубликат опции выбора
Blazemonger

Ответы:

182

Просто используйте отключенные и / или скрытые атрибуты:

<option selected disabled hidden style='display: none' value=''></option>
  • selected делает эту опцию настройкой по умолчанию.
  • disabled делает этот параметр неактивным.
  • style='display: none'делает этот параметр не отображаемым в старых браузерах. См .: Могу ли я использовать документацию для скрытого атрибута.
  • hidden отключает отображение этой опции в раскрывающемся списке.
Эдуардо
источник
3
На самом деле IE 11 отображает «скрытый» параметр.
Эдвард Оламисан
6
Webkit, похоже, не поддерживает атрибут «скрытый»
Итан Ризор,
2
Как упоминалось в разделе « Могу ли я использовать» , hiddenатрибут эффективен display: noneдля поддержки старых браузеров:<option selected disabled hidden style='display: none' value=''></option>
Neta,
66

Вы можете по установке selectedIndexв -1использовании .prop: http://jsfiddle.net/R9auG/ .

Для более старых версий jQuery используйте .attrвместо .prop: http://jsfiddle.net/R9auG/71/ .

pimvdb
источник
@IronicMuffin: Спасибо; только что протестирован и, похоже, действительно работает во всех основных браузерах.
pimvdb 05
@zobidafly: Спасибо за редактирование; Я немного уточнил.
pimvdb
1
.attrне будет работать в новых версиях jQuery. Попытка быть умной заставила меня потерпеть неудачу.
Carson IP
33

Просто используя

<option value="" selected disabled>Please select an option...</option>

будет работать где угодно без скрипта и позволит вам одновременно инструктировать пользователя.

Mvreijn
источник
25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
Андрей Р
источник
1
ff / chrome - хорошо, opera / ie7-9 - не нормально, вы можете проверить это здесь (с js или без): jsfiddle.net/R9auG/145, поэтому я рекомендую js-подход от @pimvdb
tibalt
11

Вот простой способ сделать это с помощью обычного JavaScript. Это ванильный эквивалент сценария jQuery, опубликованного pimvdb. Вы можете проверить это здесь .

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

Убедитесь, что id_here совпадает в форме и в JavaScript.

Мингвэй Самуэль
источник
3

Вы не можете. Они просто так не работают. В раскрывающемся меню должен быть постоянно выбран один из вариантов.

Вы можете (хотя я не рекомендую) следить за событием изменения, а затем использовать JS для удаления первого варианта, если он пуст.

Quentin
источник
3
Почему вы не рекомендуете такое поведение?
Джош Ной
Есть много случаев, когда вы хотите, чтобы пользователь активно выбирал что-то из списка. Я не думаю, что JS - самый оптимальный способ сделать это (хотя кажется, что это единственный способ), но я действительно думаю, что способ должен быть.
qwerty
2

Для чисто html @isherwood есть отличное решение. Для jQuery укажите идентификатор в раскрывающемся списке, затем выберите его с помощью jQuery:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

Затем используйте этот jQuery, чтобы очистить раскрывающееся меню при загрузке страницы:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

Или поместите его внутри функции:

$('#myDropDown').val(''); 

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

Джейсон Слоботски
источник
0

Вы можете попробовать этот фрагмент

$("#your-id")[0].selectedIndex = -1

У меня это сработало.

Шенбаг
источник
1
Было бы лучше предоставить jsfiddle.net для сопровождения ответа, чтобы дать более четкое объяснение.
Anonymous
1
Предполагается, что OP использует jQuery.
Evanrmurphy