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

Как реализовать 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 с пустым значением по умолчанию, которое скрыто в выпадающем списке?

107
03 июня '11 в 9:44
источник поделиться
8 ответов

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

<option selected disabled hidden style='display: none' value=''></option>
  • selected делает этот параметр по умолчанию.
  • disabled делает эту опцию незаметной.
  • style='display: none' эта опция не отображается в старых браузерах. Смотрите: Могу ли я использовать документацию для скрытого атрибута.
  • hidden делает эту опцию не отображаемой в раскрывающемся списке.
176
28 авг. '13 в 17:33
источник

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

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

64
03 июня '11 в 9:49
источник

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

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

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

30
31 окт. '13 в 13:38
источник
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
25
16 дек. '11 в 17:37
источник

Вот простой способ сделать это, используя простой JavaScript. Это ванильный эквивалент jQuery script, отправленный 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.

10
12 июня '13 в 0:37
источник

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

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

3
03 июня '11 в 9:46
источник

Для чисто 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(''); 

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

2
23 янв. '16 в 7:53
источник

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

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

Это сработало для меня.

0
07 февр. '14 в 2:02
источник

Посмотрите другие вопросы по меткам или Задайте вопрос