如何在 HTML 的选择（下拉）菜单中设置不可选择的默认描述？

How do I set an un-selectable default description in a select (drop-down) menu in HTML?

提问by RSM

I have a drop down where the user selects a language:

我有一个下拉菜单，用户可以在其中选择一种语言：

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

1. I want the default option that is initially displayed to say "Select a language" instead of "English" (my first option, displayed by default).
2. I don't want the user to be able to select "Select a language".

1. 我希望最初显示的默认选项是“选择语言”而不是“英语”（我的第一个选项，默认显示）。
2. 我不希望用户能够选择“选择语言”。

回答by Glen Selle

Building on Oded's answer, you could also set the default option but not make it a selectable option if it's just dummy text. For example you could do:

基于 Oded 的回答，您还可以设置默认选项，但如果它只是虚拟文本，则不能将其设为可选选项。例如你可以这样做：

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

This would show "Select a language" before the user clicks the select box but the user wouldn't be able to select it because of the disabled attribute.

这将在用户单击选择框之前显示“选择语言”，但由于禁用属性，用户将无法选择它。

回答by Oded

If none of the options in the select have a selectedattribute, the first option will be the one selected.

如果选择中的任何选项都没有selected属性，则第一个选项将是选定的选项。

In order to select a default option that is not the first, add a selectedattribute to that option:

要选择不是第一个的默认选项，请selected向该选项添加属性：

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

You can read the HTML 4.01 specregarding defaults in select element.

您可以阅读有关 select 元素中的默认值的HTML 4.01 规范。

I suggest reading a good HTML book if you need to learn HTML basics like this - I recommend Head First HTML.

如果您需要像这样学习 HTML 基础知识，我建议您阅读一本优秀的 HTML 书籍 - 我推荐 Head First HTML。

回答by Ashok

.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>

回答by Myles Gray

Just make option#1 Select Language:

只需选择选项#1 选择语言：

Live Demo

现场演示

回答by Chris

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

Leaving the disabled flag in prevents them from not selecting an option and the hidden flag will remove it from the list. In my case I was using it with an enum list as well and the concept holds the same

保留禁用标志可防止他们不选择选项，隐藏标志会将其从列表中删除。就我而言，我也将它与枚举列表一起使用，并且概念相同

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

回答by JBallin

Put your prompt in the 1st optionand disable it:

将您的提示放在第一个option并禁用它：

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

The first option will automatically be the selected default (what you see first when you look at the drop-down) but adding the selectedattribute is more clear and actually needed when the first field is a disabled field.

第一个选项将自动成为选定的默认值（您在查看下拉列表时首先看到的内容），但是selected当第一个字段是禁用字段时，添加属性会更加清晰且实际需要。

The disabledattribute will make the option be un-selectable/grayed out.

该disabled属性将使该选项不可选择/变灰。

---

---

Other answers suggest setting disabled=“disabled”but that's only necessary if you need to parse as XHTML, which is basically a more strict version of HTML. disabledon it's on is enough for standard HTML.

其他答案建议进行设置，disabled=“disabled”但仅当您需要解析为 XHTML 时才需要这样做，这基本上是更严格的 HTML 版本。disabled对于标准 HTML 来说，它已经足够了。

---

---

If you want to make the selection “required”(without accepting the “Select a language” option as an accepted answer):

如果您想选择“必需”（不接受“选择语言”选项作为可接受的答案）：

Add the requiredattribute to selectionand set the first option's valueto the empty string ””.

添加required属性selection，并设置第一option的value为空字符串””。

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

回答by Ketan R

Although this question has an accepted answer but I think this is a much cleaner way to achieve the desired output

虽然这个问题有一个公认的答案，但我认为这是实现所需输出的更简洁的方法

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

The requiredattribute in makes it mandatory to select an option from the list.

value=""inside the option tag combined with the requiredattribute in select tag makes selection of 'Select' option not permissible, thus achieving the required output

中的required属性强制从列表中选择一个选项。

option 标签内的value=""结合select 标签中的required属性使得选择' Select'选项是不被允许的，从而实现了所需的输出