【问题标题】：default select option as blank默认选择选项为空白
【发布时间】：2012-01-26 04:35:39
【问题描述】：

我有一个非常奇怪的要求，要求我在 HTML 的下拉菜单中默认没有选择任何选项。然而，

我不能用这个，

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

因为，为此我必须进行验证以处理第一个选项。任何人都可以在不将第一个选项实际包含在选择标签中的情况下帮助我实现这个目标吗？

【问题讨论】：

据我所知，这是获得空行的唯一方法。你的意思是你必须做验证？只需设置一个检查，如果 value="" 然后返回 false。
这将是一个使用单选按钮而不是下拉菜单的好机会。
在我看来，这根本不是一个奇怪的要求。我在同一条船上。我也需要一个“无选项”默认值。我有几个不需要提交表单的下拉菜单。以这种方式禁用它们可以防止用户在不相关时进行选择。好问题！ +1
不是一个奇怪的要求，如果 SELECT 有一个 REQUIRED 属性，那么有一个占位符标签选项是 HTML5 dev.w3.org/html5/spec-preview/…的要求
@Blazemonger 单选按钮是一个糟糕的主意，如果您有超过 3 或 4 个选项。想象一下包含 15 多个选项或 50 个或更多选项的下拉列表？在许多情况下，它们都有自己的设计问题，但问题仍然是单选按钮无法很好地缩放根本。

标签： html

【解决方案1】：

我想一个好主意是使用单选按钮，将 #1 设置为默认值并隐藏它，例如给它一个 name="init" 和 value="null" 或其他，由你决定！

这样单选按钮列表肯定有值，但逻辑上可以使用默认的null！

我认为没有必要进一步阐述，因为这个想法很容易用display: none;或visibility: hidden;实现

...而我认为第一个 display: none; 是更好的选择：

【讨论】：

【解决方案2】：

也许这会有所帮助

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option -- 默认显示。但是，如果您选择了一个选项，您将无法重新选择它。

你也可以通过添加一个空的option来隐藏它

<option style="display:none">

所以它不会再出现在列表中了。

选项 2

如果您不想编写 CSS 并期望与上述解决方案相同的行为，只需使用：

<option hidden disabled selected value> -- select an option -- </option>

【讨论】：

Here is a JSFiddle of the above，以防万一有人需要。
@azerafati 正如@Rafael_Mori 指出的那样，您可以通过使用“隐藏”属性来归档相同的内容，因此不需要 CSS。只是纯 HTML5 ;) <option hidden disabled selected value> -- select an option -- </option>
如果我希望能够重新选择它怎么办？我只是不希望它发送任何东西。有可能吗？
向选项元素添加隐藏属性对我来说很神奇！没想到会这么容易。谢谢
请注意，隐藏属性和显示样式在 IE 中都不起作用，即使是 11。stackoverflow.com/questions/58862242/…

【解决方案3】：

对于那些使用<select multiple>（组合框；无下拉菜单）的人，这对我有用：

<select size=1 disabled multiple>
  <option hidden selected></option>
  <option>My Option</option>
</select>

【讨论】：

【解决方案4】：

<td><b>Field Label:</b><br>
    <select style='align:left; width:100%;' id='some_id' name='some_name'>
    <option hidden selected>Select one...</option>
    <option value='Value1'>OptLabel1</option>
    <option value='Value2'>OptLabel2</option>
    <option value='Value3'>OptLabel3</option></select>
</td>

只需将“隐藏”放在要隐藏在下拉列表中的选项上。

【讨论】：

【解决方案5】：

只需使用“..option hidden selected..”作为默认选项

【讨论】：

【解决方案6】：

如果您一开始不需要任何空选项，请尝试以下第一行：

    <option style="display:none"></option>

【讨论】：

【解决方案7】：

如果您使用的是 Angular (2+)，（或任何其他框架），您可以添加一些逻辑。逻辑是：如果用户还没有选择任何其他选项，则只显示一个空选项。所以用户选择了一个选项后，空选项就消失了。

对于 Angular (9)，这看起来像这样：

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

【讨论】：

【解决方案8】：

这应该会有所帮助：

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

【讨论】：

这是实现此要求的最现代 (html5) 方式，请注意这需要一个 type=submit 按钮。带有 onclick 提交处理程序的 type=button 不会自动要求用户进行选择。

【解决方案9】：

只是一个小评论：

一些 Safari 浏览器似乎既不尊重“hidden”属性也不尊重样式设置“display:none”（在 MacOS 10.12.6 下使用 Safari 12.1 测试）。如果没有明确的占位符文本，这些浏览器只会在选项列表中显示一个空的第一行。因此，总是为这个“虚拟”条目提供一些解释性文本可能很有用：

<option hidden disabled selected value>(select an option)</option>

多亏了“禁用”属性，无论如何它都不会被主动选择。

【讨论】：

【解决方案10】：

为了显示请在下拉列表中选择一个值，并在选择某个值后将其隐藏。请使用以下代码。

它还将支持所需的验证。

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

【讨论】：

【解决方案11】：

我觉得这很有趣，因为不久前我刚刚经历过同样的事情。但是，我在 Internet 上看到了一个关于此解决方案的示例。

事不宜迟，请看下面的代码片段：

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

这样，它将保持不可提交但可以随时选择。用户界面更方便，用户体验更佳。

就是这样，希望对你有帮助。干杯！

【讨论】：

让它无法提交但同时也将用户的注意力吸引到下拉列表似乎是多余的，但我喜欢这个建议
@lofacture：感谢您的意见。实际上，我写的代码是我想要的，但是正如你所说，这取决于用户/所有者的需求

【解决方案12】：

我明白你想要做什么。最好和最成功的方法是：

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

【讨论】：

【解决方案13】：

试试这个：

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

下拉列表中的第一个选项将为空白。

【讨论】：

【解决方案14】：

我正在使用 Laravel 5 框架，@Gambi 的回答也对我有用，但对我的项目进行了一些更改。

我在数据库表中有选项值，我将它们与 foreach 语句一起使用。但在声明之前，我添加了一个带有@Gambit 建议设置的选项并且它有效。

这里是我的例子：

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

我希望这也对某人有所帮助。继续努力！

【讨论】：

【解决方案15】：

仅使用 CSS 的解决方案：

答：内联 CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

B：CSS 样式表

如果您手头有 CSS 文件，您可以使用以下命令定位第一个 option：

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

【讨论】：

【解决方案16】：

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在这种情况下，您可以避免自定义验证。

【讨论】：

【解决方案17】：

试试这个：

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

在 HTML5 中验证。适用于选择元素中的required 属性。可以重新选择。适用于 Google Chrome 45、Internet Explorer 11、Edge、Firefox 41。

【讨论】：

【解决方案18】：

今天（2015-02-25）

这是有效的 HTML5 并向服务器发送一个空白（不是空格）：

<option label=" "></option>

在http://validator.w3.org/check上验证有效性

已验证 Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5) 的行为

以下内容也通过了验证今天，但从大多数浏览器（可能不希望）和其他浏览器（Chrome40/Linux 通过一个空白）的服务器上也传递了某种空格字符：

<option>&#160;</option>

以前 (2013-08-02)

根据我的笔记，上面显示的选项标签内的不间断空格实体在 2013 年产生了以下错误：

错误：W3C 标记验证服务（公共）：第一个子选项具有必需属性但不带多个属性，其大小为 1，必须有一个空 value 属性，或者不能有文本内容。

当时，常规空格是有效的 XHTML4，并从每个浏览器向服务器发送一个空格（不是空格）：

<option> </option>

未来

如果规范更新为明确允许空白选项，我会很高兴。最好使用最简洁的语法。以下任何一种都很好：

<option />
<option></option>

测试文件

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

【讨论】：

【解决方案19】：

您可以使用 Javascript 来实现这一点。试试下面的代码：

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

或 JQuery

$("#myDropdown").prop("selectedIndex", -1);

【讨论】：

This solution partially works with Chrome 35: the dropdown does not show any selection when the list of option is invisible, but shows the first option selected when the list of options is made visible.不过 Safari 7 的行为符合预期。
有趣的是：这适用于 HTML 表单验证。如果您在select 元素上使用required 属性并在未选择选项的情况下提交，表单验证将失败并告诉您，您必须进行选择。因此我真的很喜欢这种方法。（至少在 Chrome 中测试过）
不起作用（至少在撰写本文时在当前浏览器中 - 并且不必要地依赖于 javascript。
截至 2019 年，只有 Safari IOS 10 拒绝玩这个

【解决方案20】：

没有 HTML 解决方案。根据 HTML 4.01 规范，如果 option 元素都没有 selected 属性，则浏览器行为是未定义的，并且浏览器在实践中所做的是它们预先选择了第一个选项。

作为一种解决方法，您可以将select 元素替换为一组input type=radio 元素（具有相同的name 属性）。这将创建一个具有不同外观和用户界面的相同类型的控件。如果input type=radio 元素都没有checked 属性，则在大多数现代浏览器中最初都不会选择它们。

【讨论】：