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

Question

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

Как мне этого добиться?

Answer 1

Решение Кайла отлично сработало для меня, поэтому я провел исследование, чтобы избежать любых J и 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>

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

Если вы не хотите, чтобы вид текста-заполнителя отображался в списке параметров после того, как пользователь нажимает на поле выбора, просто добавьте атрибут 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>

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

Answer 2

Вот решение:

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

Answer 3

Правильным и семантическим способом является использование опции метка-заполнитель :

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

Это заставит пользователя выбрать другой вариант, чтобы иметь возможность отправить форму,и браузеры должны отображать 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>

Answer 4

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

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

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

Надеюсь, это поможет.

Answer 5

Попробуйте это:

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

В CSS:

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

Answer 6

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

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.

Answer 7

Op1:

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​

Answer 8

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

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