我有一个很奇怪的要求，其中要求我默认在HTML的下拉菜单中没有选择任何选项。然而，
我不能用这个
<select>
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>因为，为此，我将必须进行验证以处理第一个选项。有人可以在没有将第一个选项作为select标签的一部分的情况下帮助我实现此目标吗？
默认选择选项为空白
为了显示，请在下拉列表中选择一个值，并在选择某个值后将其隐藏。请使用以下代码。
它还将支持所需的验证。
<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>我正在使用Laravel 5框架，@ Gambi的回答也对我有用，但是对我的项目进行了一些更改。
我在数据库表中有选项值，并且将它们与foreach语句一起使用。但是在声明之前，我添加了一个带有@Gambit建议设置的选项，并且它起作用了。
我的例子是：
@isset($keys)
<select>
<option disabled selected value></option>
@foreach($keys as $key)
<option>{{$key->value)</option>
@endforeach
</select>
@endisset
我希望这也会对某人有所帮助。保持良好的工作！
尝试这个：
<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>
下拉菜单中的第一个选项为空白。
没有HTML解决方案。根据HTML 4.01规范，如果所有option元素都不具有selected属性，则浏览器的行为是不确定的，并且在实践中，浏览器的作用是使第一个选项被预选。
解决方法是，可以用select一组input type=radio元素（具有相同name属性）替换该元素。尽管外观和用户界面不同，但这会创建相同类型的控件。如果所有input type=radio元素都不具有checked属性，则在大多数现代浏览器中最初都不会选择它们。
只是一句话：
某些Safari浏览器似乎既不尊重“隐藏”属性也不尊重样式设置“ display：none”（在MacOS 10.12.6下使用Safari 12.1进行了测试）。如果没有明确的占位符文本，这些浏览器只会在选项列表中显示空的第一行。因此，始终为该“虚拟”条目提供一些解释性文本可能会很有用：
<option hidden disabled selected value>(select an option)</option>
由于使用了“禁用”属性，因此无论如何都不会主动选择它。
我发现它真的很有趣，因为不久前我才经历过同样的事情。但是，我在Internet上遇到了有关此解决方案的示例。
事不宜迟，请参见下面的代码片段：
<select>
<option value data-isdefault="true">--Choose one Option--</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
这样，它将随时保持不可提交但可选的状态。用户界面更方便，用户体验更出色。
好了，我希望对您有所帮助。干杯!
这应该有帮助：
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>您可以使用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);
<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>
在这种情况下，您可以避免自定义验证。
仅使用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>今天（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> </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>
也许这会有所帮助
<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>
尝试这个：
在HTML5中验证。与
requiredselect元素中的attribute一起使用。可以重新选择。适用于Google Chrome 45，Internet Explorer 11，Edge，Firefox 41。