Html 默认选择选项为空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8605516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
default select option as blank
提问by Pankaj Parashar
I have a very weird requirement, wherein I am required to have no option selected by default in drop down menu in HTML. However,
我有一个非常奇怪的要求，其中我需要在 HTML 的下拉菜单中默认没有选择任何选项。然而，
I cannot use this,
我不能用这个，
<select>
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Because, for this I will have to do validation to handle the first option. Can anyone help me in achieving this target without actually including the first option as part of the select tag?
因为，为此我将不得不进行验证来处理第一个选项。任何人都可以帮助我实现这个目标而不实际将第一个选项作为选择标签的一部分吗？
回答by Gambit
Maybe this will be helpful
也许这会有所帮助
<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 --Will be displayed by default. But if you choose an option,you will not be able select it back.
-- select an option --将默认显示。但是，如果您选择了一个选项，您将无法重新选择它。
You can also hide it using by adding an empty option
您还可以通过添加一个空来隐藏它 option
<option style="display:none">
<option style="display:none">
so it won't show up in the list anymore.
所以它不会再出现在列表中。
Option 2
选项 2
If you don't want to write CSS and expect the same behaviour of the solution above, just use:
如果您不想编写 CSS 并期望与上述解决方案具有相同的行为，只需使用：
<option hidden disabled selected value> -- select an option -- </option>
<option hidden disabled selected value> -- select an option -- </option>
回答by Matschie
You could use Javascript to achieve this. Try the following code:
您可以使用 Javascript 来实现这一点。试试下面的代码：
HTML
HTML
<select id="myDropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
JS
JS
document.getElementById("myDropdown").selectedIndex = -1;
or JQuery
或 JQuery
$("#myDropdown").prop("selectedIndex", -1);
回答by GlenPeterson
Today (2015-02-25)
今天 (2015-02-25)
This is valid HTML5 and sends a blank (not a space) to the server:
这是有效的 HTML5 并向服务器发送空白（不是空格）：
<option label=" "></option>
Verified validity on http://validator.w3.org/check
在http://validator.w3.org/check上验证有效性
Verified behavior with Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5)
使用 Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5) 验证行为
The following also passes validation today, but passes some sort of space character too the server from most browsers (probably not desirable) and a blank on others (Chrome40/Linux passes a blank):
以下内容也通过了今天的验证，但也通过了大多数浏览器的服务器（可能不需要）和其他人的空白（Chrome40/Linux 传递了空白）的某种空格字符：
<option> </option>
Previously (2013-08-02)
以前 (2013-08-02)
According to my notes, the non-breaking-space entity inside the option tags shown above produced the following error in 2013:
根据我的笔记，上面显示的选项标签内的不间断空格实体在 2013 年产生了以下错误：
Error: W3C Markup Validaton Service (Public): The first child option element of a select element with a required attribute and without a multiple attribute, and whose size is 1, must have either an empty value attribute, or must have no text content.
错误：W3C 标记验证服务（公共）：具有 required 属性但没有 multiple 属性且大小为 1 的 select 元素的第一个子选项元素必须具有空值属性，或者必须没有文本内容。
At that time, a regular space was valid XHTML4 and sent a blank (not a space) to the server from every browser:
当时，常规空格是有效的 XHTML4，并从每个浏览器向服务器发送一个空格（不是空格）：
<option> </option>
Future
未来
It would make my heart glad if the spec was updated to explicitly allow a blank option. Preferably using the briefest syntax. Either of the following would be great:
如果规范更新为明确允许空白选项，我会很高兴。最好使用最简洁的语法。以下任何一项都会很棒：
<option />
<option></option>
Test File
测试文件
<!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>
回答by Rafael Mori
<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>Just put "hidden" on option you want to hide on dropdown list.
只需将“隐藏”放在要隐藏在下拉列表中的选项上。
回答by Kai Noack
Solution that works by only using CSS:
仅使用 CSS 的解决方案：
A: Inline CSS
A: 内联 CSS
<select>
<option style="display:none;"></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>B: CSS Style Sheet
B: CSS 样式表
If you have a CSS file at hand, you can target the first optionusing:
如果您手头有 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>回答by rohan parab
This should help :
这应该有帮助：
https://www.w3schools.com/tags/att_select_required.asp
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>回答by Fawaz
<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>
You can avoid custom validation in this case.
在这种情况下，您可以避免自定义验证。
回答by Andreas Rozek
Just a small remark:
只是一个小说明：
some Safari browsers do not seem to respect neither the "hidden" attribute nor the style setting "display:none" (tested with Safari 12.1 under MacOS 10.12.6). Without an explicit placeholder text, these browsers simply show an empty first line in the list of options. It may therefore be useful to always provide some explanatory text for this "dummy" entry:
某些 Safari 浏览器似乎既不尊重“隐藏”属性也不尊重样式设置“显示：无”（在 MacOS 10.12.6 下使用 Safari 12.1 进行测试）。如果没有明确的占位符文本，这些浏览器只会在选项列表中显示一个空的第一行。因此，始终为此“虚拟”条目提供一些解释性文本可能很有用：
<option hidden disabled selected value>(select an option)</option>
Thanks to the "disabled" attribute, it won't be actively selected anyway.
由于“禁用”属性，无论如何都不会主动选择它。
回答by farisfath25
I found it really interesting because I just experienced the same thing not so long time ago. However, I came across to an example on the Internet about the solution regarding this.
我觉得这真的很有趣，因为我不久前刚刚经历过同样的事情。但是，我在互联网上遇到了一个关于此解决方案的示例。
Without any further ado, see the code fragment below:
闲话少说，看下面的代码片段：
<select>
<option value data-isdefault="true">--Choose one Option--</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
With that, it will stay un-submittable but selectable, anytime. More convenience for User Interface and great for User Experience.
有了这个，它将保持不可提交但可以随时选择。更方便的用户界面和伟大的用户体验。
Well that's all, I hope it helps. Cheers!
好了，就这些，希望能帮到你。干杯!
回答by Guryash Singh
I understand what you are trying to do.The best and the most successful way is :
我明白你在做什么。最好和最成功的方法是：
<select name='department' required>
<option value="">None</option>
<option value="Teaching">Teaching department</option>
<option value="nonTeaching">Non-teaching department</option>
</select>
