Как установить невыбираемое описание по умолчанию в меню выбора (выпадающего меню) в HTML?

Question

У меня есть раскрывающийся, где пользователь выбирает язык:

<select> 
    <option>English</option> 
    <option>Spanish</option> 
</select> 

1. Я хочу вариант по умолчанию, который изначально отображается сказать «Выберите язык» вместо «английского» (моего первого варианта, отображается по умолчанию ).
2. Я не хочу, чтобы пользователь мог выбрать «Выбрать язык».

Answer 1

Если ни один из вариантов в элементе выбора не имеет атрибута selected, первым будет выбран один из вариантов.

Для того, чтобы выбрать опцию по умолчанию, который не является первым, добавьте атрибут selected к этой опции:

<option selected="selected">Select a language</option> 

Вы можете прочитать HTML 4.01 spec относительно значения по умолчанию в элементе выбора.

Предлагаю прочитать хорошую HTML-книгу, если вам необходимо изучить основы HTML, подобные этому - рекомендую Head First HTML.

Answer 2

Просто сделайте вариант # 1 Выбор языка:

Live Demo

Answer 3

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

<option selected="selected" disabled="disabled">Select a language</option> 

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

Answer 4

.selectmenu{ 
 
    
 
\t -webkit-appearance: none; /*Removes default chrome and safari style*/ 
 
\t -moz-appearance: none; /* Removes Default Firefox style*/ 
 
\t background: #0088cc ; 
 
\t width: 200px; /*Width of select dropdown to give space for arrow image*/ 
 
\t text-indent: 0.01px; /* Removes default arrow from firefox*/ 
 
\t text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
 
\t color: #FFF; 
 
\t border-radius: 2px; 
 
\t padding: 5px; 
 
    border:0 !important; 
 
\t box-shadow: inset 0 0 5px rgba(000,000,000, 0.5); 
 
} 
 
.hideoption { display:none; visibility:hidden; height:0; font-size:0; }

Try this html 
 

 
<select class="selectmenu"> 
 
<option selected disabled class="hideoption">Select language</option> 
 
<option>Option 1</option> 
 
<option>Option 2</option> 
 
<option>Option 3</option> 
 
<option>Option 4</option> 
 
<option>Option 5</option> 
 
</select>

Answer 5

<option value="" selected disabled hidden>Default Text</option> 

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

<select asp-for="Property" asp-items="Html.GetEnumSelectList<PropertyEnum>()"> 
         <option value="" selected disabled hidden>Select Property Enum</option> 
         <option value=""></option> 
        </select> 

Answer 6

Поместите подсказку в 1 option и вывести его из строя:

<selection> 
    <option disabled selected>”Select a language”</option> 
    <option>English</option> 
    <option>Spanish</option> 
</selection> 

Первый вариант будет автоматически выбранный по умолчанию (то, что вы видите вначале при просмотре раскрывающегося списка), но добавление атрибута selected более понятно и действительно необходимо, когда первое поле является отключенным.

Атрибут disabled сделает выбор невозможным или недоступным.

---

Другие ответы предполагают установление disabled=“disabled”, но это необходимо, только если нужно разобрать, как XHTML, который является в основном более строгая версия HTML.disabled на нем достаточно для стандартного HTML.

---

I е вы хотите сделать выбор «необходимый» (без принятия «Выбор языка» вариант в качестве принятого ответа):

Добавить атрибут required в selection и установить первый optionvalue до пустой строки ””.

<selection required> 
    <option disabled value=“”>Select a language</option> 
    <option>English</option> 
    <option>Spanish</option> 
</selection>