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

Ответы

Ответ 1

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

<option selected disabled hidden style='display: none' value=''></option>

selected делает этот параметр по умолчанию.
disabled делает эту опцию незаметной.
style='display: none' эта опция не отображается в старых браузерах. Смотрите: Могу ли я использовать документацию для скрытого атрибута.
hidden делает эту опцию не отображаемой в раскрывающемся списке.

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

Ответ 5

Вот простой способ сделать это, используя простой 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.

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

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