默认选择选项为空白

458

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

我不能用这个

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
展开摘要

因为，为此，我必须进行验证才能处理第一个选项。有人可以在没有将第一个选项实际包含在select标签中的情况下帮助我实现此目标吗？

html 
— Pankaj Parashar
source
2
据我所知，这是获得空白行的唯一方法。您是什么意思，您必须进行验证？只需设置检查以说出value =“”，然后返回false。
— 罗伯特
1
这将是使用单选按钮而不是下拉菜单的好机会。
— Blazemonger，2015年
9
我认为这根本不是一个奇怪的要求。我在同一条船上。我也需要一个“无选项”默认值。我有一些不需要提交表格的下拉菜单。以这种方式禁用它们可以防止用户在无关紧要的情况下做出选择。好问题！+1
— 斯科特（Scott）
不是一个奇怪的要求，如果SELECT有那么有一个占位符标签选项必需的属性是HTML5的要求dev.w3.org/html5/spec-preview/...
— 德图Testini
如果您拥有超过3个或4个，@ Blazemonger单选按钮是一个糟糕的主意。想象一下一个包含15个以上选项或50个或更多选项的下拉列表？那些拥有自己的设计问题在很多情况下，但问题仍然矗立的是单选按钮没有很好地扩展在所有。
— TylerH

Answers:

1013

也许这会有所帮助

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

— 甘比特
source
15
如果有人需要，这是上述的JSFiddle。
— Uwe Keim
26
@azerafati就像@Rafael_Mori指出的那样，您可以使用“ hidden”属性将其存档，因此不需要CSS。只是纯HTML5;）<option hidden disabled selected value> -- select an option -- </option>
— BrainOverflow
如果我想重新选择该怎么办？我只是不想让它发送任何东西。可能吗？
— 迈克尔·罗杰斯
1
在option元素中添加隐藏属性对我来说是不可思议的！没想到它会这么容易。谢谢
— S. Domeng '19
要知道，无论是隐藏属性，显示风格不工作在IE浏览器，甚至11 stackoverflow.com/questions/58862242/...
— yatskovsky
113

您可以使用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);
— Matschie
source
此解决方案部分适用于Chrome 35：当选项列表不可见时，下拉列表不会显示任何选择，而在选项列表可见时，则会显示第一个选择的选项。Safari 7的行为符合预期。
— flochtililoch 2014年
有趣的是：这可用于HTML表单验证。如果您使用元素required上的属性select并提交但未选择任何选项，则表单验证将失败并提示您，您必须进行选择。因此，我真的很喜欢这种方法。（至少已在Chrome中进行了测试）
— Andreas Linnert
不起作用（至少在当前的浏览器中，截至本文撰写时-并不必要地依赖javascript。）
— silentmouth
1
截至2019年，只有Safari IOS 10拒绝与此玩球
— Ayyash
36

今天（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（三星-Galaxy-S5）

以下代码今天也通过了验证，但是通过大多数浏览器的服务器（也可能不是）也传递了某种空格字符（在其他浏览器中传递了空格）（Chrome40 / Linux传递了空格）：

<option>&#160;</option>

以前（2013-08-02）

根据我的注释，上面显示的选项标签内的非空格实体在2013年产生了以下错误：

错误：W3C标记有效期服务（公共）：select元素的第一个子选项元素具有必需的属性，但没有multiple属性，其大小为1，必须具有空值属性，或者没有文本内容。

当时，常规空间是有效的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>
— 格伦·彼得森
source
15 

<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>
展开摘要

只需在要隐藏在下拉列表中的选项上加上“隐藏”即可。

— 拉斐尔·莫里（Rafael Mori）
source
8

仅使用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>
展开摘要

— 凯诺克
source
4

这应该有帮助：

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>
展开摘要

— 罗汉·抛物
source
这是达到此要求的最现代（html5）方式，请注意，这需要使用type = submit按钮。具有onclick提交处理程序的type = button不会自动要求用户进行选择。
— Arjan
3 
<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>

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

— 法瓦兹
source
2

只是一句话：

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

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

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

— 安德烈亚斯（Andreas Rozek）
source
1

我了解您正在尝试做的事情。最好，最成功的方法是：

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
— 古拉什·辛格（Guryash Singh）
source
1

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

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

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

这样一来，它将随时保持不可提交但可选的状态。用户界面更方便，用户体验更出色。

好了，我希望对您有所帮助。干杯!

— 25天
source
使其
— 既
@lofacture：感谢您的输入。实际上，我编写的代码是我想要的代码，但是是的，正如您所说，它取决于用户/所有者的需求
— farisfath25
0

没有HTML解决方案。根据HTML 4.01规范，如果所有option元素都不具有selected属性，则浏览器的行为是不确定的，并且在实践中浏览器的作用是使第一个选项被预选。

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

— Jukka K.Korpela
source
0

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

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

我的例子是：

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

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

— 日志Oracle
source
0

尝试这个：

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

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

— 阿披吉派
source
0

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

它还将支持所需的验证。

<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>
展开摘要

— 巴斯里·内森（Bathri Nathan）
source
0

如果您使用的是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>
— 迈克·德·克莱克
source
-2

尝试这个：

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

在HTML5中验证。与requiredselect元素中的attribute一起使用。可以重新选择。适用于Google Chrome 45，Internet Explorer 11，Edge，Firefox 41。

— 特里斯坦·贝利
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.