今天（2015-02-25）

Question

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

我不能用它，

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

因为，为此，我将不得不进行验证以处理第一个选项。任何人都可以帮助我实现这个目标而不包括第一个选项作为select标签的一部分吗？

Answer 1

也许这会有所帮助

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

Answer 2

您可以使用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);

Answer 3

今天（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传递空白）：< / p>

<option>&#160;</option>

之前（2013-08-02）

根据我的说明，上面显示的选项标签内的非破坏空间实体在2013年产生了以下错误：

错误：W3C标记验证服务（公共）：第一个子选项具有必需属性且没有a的select元素的元素多个属性，其大小为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>

Answer 4

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>

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

Answer 5

只使用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>

Answer 6

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

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

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

Answer 8

没有HTML解决方案。根据HTML 4.01规范，如果option个元素都没有selected属性，则浏览器行为是未定义的，实际上浏览器的做法是预先选择第一个选项。

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

Answer 9

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

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

Answer 10

只需使用“ ..选项隐藏选定的..”作为默认选项

Answer 11

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

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

Answer 12

一句话：

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

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

由于使用了“禁用”属性，因此无论如何都不会对其进行主动选择。

Answer 13

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

它还将支持所需的验证。

Answer 14

我发现它非常有趣，因为不久前我才经历过同样的事情。但是，我在Internet上遇到了有关此问题的解决方案的示例。

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

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

有了它，它将随时保持不可提交但可以选择的状态。用户界面更方便，用户体验更出色。

仅此而已，希望对您有所帮助。干杯！

Answer 15

我了解您要做什么。最好和最成功的方法是：

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

Answer 16

这应该有帮助：

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>

Answer 17

试试这个：

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

下拉菜单中的第一个选项是空白。

Answer 18

我正在使用Laravel 5框架，而@Gambi的回答也适用于我，但我的项目有一些变化。

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

这是我的例子：

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

我希望这对某人也有帮助。保持良好的工作！

Answer 19

试试这个：

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

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

默认选择选项为空白

19 个答案:

今天（2015-02-25）

之前（2013-08-02）

未来

测试文件