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

【问题标题】：How do I set an un-selectable default description in a select (drop-down) menu in HTML?如何在 HTML 的选择（下拉）菜单中设置不可选择的默认描述？
【发布时间】：2019-01-24 15:10:06
【问题描述】：

我有一个用户选择语言的下拉菜单：

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

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

【问题讨论】：

我可能是错的，但我认为 OP 旨在询问如何显示一些不属于选项的文本，例如：link。 Oded 和 Myles 的答案都适用于您希望将选项之一显示为文本的情况。顺便说一句，我认为将其作为 Myles 解决方案中的第一个选项并不是一个好的设计。但这只是我个人的看法。
@YangChi 同意。提交了对问题的编辑。

标签： html html-select

【解决方案1】：

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

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

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

【讨论】：

我认为将selected="selected" 删除为selected 更简单。 disabled 相同。提交编辑。请注意，如果使用解析器，最好从另一个答案中包含该值：“我写的是有效的多语言 HTML/XML。使用
我喜欢stackoverflow

【解决方案2】：

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

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

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

您可以阅读HTML 4.01 spec 关于选择元素中的默认值。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

Live Demo

【讨论】：

【解决方案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>

【讨论】：

hidden 并非在所有浏览器中都有效，但如果您希望某些浏览器不显示该选项，将其放在那里并没有什么坏处。我认为在这种情况下，在查看选项时有“说明”很好。

【解决方案6】：

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

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

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

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

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

如果您希望选择“必填”（不接受“选择语言”选项作为已接受的答案）：

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

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

【讨论】：

【解决方案7】：

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

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

required 属性使得必须选择列表中的一个选项。
选项标签内的
value="" 与 select 标签中的 required 属性相结合，使得选择 'Select' 选项不允许，从而达到所需的输出

【讨论】：