HTML select: как установить текст по умолчанию, который не будет отображаться в раскрывающемся списке?

Ответ 1

Kyle solution отлично подойдет для меня, поэтому я сделал свое исследование, чтобы избежать Js и CSS, но просто придерживался HTML. Добавляя значение selected к элементу, который мы хотим отобразить в качестве заголовка, заставляет его показывать в первую очередь в качестве заполнителя. Что-то вроде:

<option selected disabled>Choose here</option>

Полная разметка должна быть в следующем порядке:

<select>
    <option selected disabled>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Вы можете взглянуть на этот fiddle, и вот результат:

Если вы не хотите, чтобы вид текста заполнителя отображался в списке, как только пользователь нажимает на поле выбора, просто добавьте атрибут hidden, например:

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Проверьте скрипку здесь и снимок экрана ниже.

Ответ 2

Вот решение:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Ответ 3

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

• Добавьте элемент option в качестве первого дочернего элемента select
• Задайте value = "" к этому option
• Установите текст заполнителя в качестве содержимого этого option
• Добавьте required атрибут select

Это заставит пользователя выбрать другой вариант, чтобы иметь возможность отправить форму, а браузеры должны render option по желанию:

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

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

• selected, чтобы сделать его selected по умолчанию
• disabled, чтобы сделать его недоступным для пользователя
• display: none, чтобы скрыть его из списка значений

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Ответ 4

Поскольку вы не можете использовать присваивающие заполнители для тегов select, я не считаю, что есть какой-либо способ сделать именно то, что вы просите, с помощью чистого HTML/CSS. Вы можете, однако, сделать что-то вроде этого:

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

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

Я надеюсь, что это поможет.

Ответ 5

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

HTML:

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

CSS

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript (с JQuery):

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

Я сделал jsfiddle для демонстрации. Протестировано с Firefox и IE8.

Ответ 6

Попробуйте следующее:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

В CSS:

.selectSelection option:first-child{
    display:none;
}

Ответ 7

<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

вы можете, конечно, переместить css в css файл, если хотите, и поместите script, чтобы поймать кнопку esc, чтобы снова отключить отключенный. В отличие от других подобных ответов я помещаю value="", это так, если вы отправляете значение вашего списка выбора с формой, оно не будет содержать "выбрал что-то". В asp.net mvc 5, отправленном как json, скомпилированном с var obj = { prop:$('#ddl').val(),...}; и JSON.stringify(obj);, значение prop будет равно null.