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

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

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

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

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

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

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

Вот решение:

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

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

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

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

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

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

• В 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>

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

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

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

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

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

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

В CSS:

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

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

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.

<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 будет нулевым.

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');​​​​​​​