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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

Answer 3

.selectmenu{
  
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/
	background: #0088cc ;
	width: 200px; /*Width of select dropdown to give space for arrow image*/
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	color: #FFF;
	border-radius: 2px;
	padding: 5px;
    border:0 !important;
	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 4

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

Демонстрация в реальном времени

Answer 5

Хотя на этот вопрос принят приемлемый ответ, но я думаю, что это гораздо более чистый способ достижения желаемого результата

<select required>
<option value="">Select</option>
<option>English</option>
<option>Spanish</option>
</select>

Атрибут required делает обязательнымвыберите опцию из списка.

value = "" внутри тега опции в сочетании с атрибутом required в теге select делает выбор ' 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 f если вы хотите сделать выбор «обязательным» (не принимая опцию «Выбор языка» в качестве принятого ответа):

Добавьте атрибут required к selection и установите для первых option 'value пустую строку ””.

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

Answer 7

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

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

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