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


108

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

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

Ответы:


215

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

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

введите описание изображения здесь


Это отличный ответ, но при использовании Angular JS он не работает, поскольку Angular автоматически добавляет пустой параметр и устанавливает его по умолчанию
Деннис Ванони

В любом случае, для справки, вот как вы бы поступили в Angular, просто объедините вышеупомянутый подход с конкретным Angular, описанным здесь metaltoad.com/blog/…
Нобита

Обратите внимание , что атрибут , используемый в ответе выше, является атрибутом , который может быть установлен на любой HTML элемент, и, как правило (но не обязательно) , реализованный быть эквивалентно установке с помощью CSS. hiddendisplay: none
Марк Эмери

2
Следует также отметить , что установка hiddenна optionв selectне работает в Safari, на любой прошивке или Mac. Таким образом, этот ответ предлагает только частичную поддержку браузера.
Марк Эмери

1
Это прекрасно!
Fibo

59

Вот решение:

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

5
Обратите внимание, что selected="true"это неверно. Вместо этого используйте selected="selected"в (X) HTML или просто selectedв HTML. Похоже, вы перепутали selectedатрибут со selectedсвойством, которое изменяется следующим образом: myOption.selected = true;илиmyOption.selected = false;
Ориоль

2
"display: none" игнорируется браузерами, использующими собственный выбор устройства, например Android и iOS. Вы должны удалить параметр из DOM в select.focus, вернуть его и выбрать в select.blur, чтобы он заработал.
Радек Печ

-1; как и ответ Nobita, используяhidden (который «обычно реализуется в CSS» , используя в display: noneлюбом случае), используяdisplay: none на условиях optionне работает в Safari; опция все еще появляется.
Марк Эмери

50

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

  • Добавьте 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>


Следует отметить, что даже это (которое является наиболее тщательной попыткой решить эту проблему из всех ответов здесь) не работает в Safari ни на iOS, ни на Mac. Опция останется, когда выбор будет открыт.
Марк Эмери

@MarkAmery Я предлагаю вам сделать так, как это предлагается в ответе @Nobita, и просто добавить hiddenатрибут в тег опции заполнителя вместо того, display: noneкак кажется, что большинство мобильных браузеров игнорируют display: noneатрибут CSS, и, на мой взгляд, он даже более семантически правильный.
Gaboik1

@ Gaboik1 В комментариях к этому ответу я отметил, что hiddenэто обычно реализуется как display: noneпод капотом (и в спецификации явно предлагается это как «типичная» реализация). Таким образом, я был бы удивлен, если бы какие-нибудь браузеры - мобильные или другие - hiddenработали, но display: noneне работали . Вы можете привести какой-нибудь пример?
Марк Эмери

21

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

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

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

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


2
Я обнаружил, что лучше всего сочетание отключенных и выбранных с помощью style = "display: none;". disabled полезно, когда вы хотите выполнить проверку - он гарантирует, что по умолчанию у вас не выбран параметр enabled.
Илларион Ковальчук

-1, потому что другие ответы здесь (в частности, Нобтии и Ориола) предоставляют как гораздо больше поясняющих деталей, так и гораздо более полные решения.
Марк Эмери

7

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

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

В CSS:

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

В этом ответе нет ничего такого, чего не было бы в других ответах, плюс он имеет плохое форматирование; -1.
Марк Эмери

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.


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

вместо того, чтобы spanиспользовать там, legendи это было бы идеально, илиlabel
karlcow

Это интересный подход, и я вижу единственный возможный способ заставить такое поведение работать в Safari, но здесь он реализован плохо; вам, по крайней мере, нужно, чтобы pointer-events: noneв вашем диапазоне клики проходили для выбора.
Марк Эмери

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


0

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');​​​​​​​
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.