为了显示，请在下拉菜单中选择一个值，并在选择某个值后隐藏它。请使用下面的代码。

它还将支持所需的验证。

<select class="form-control" required> <option disabled selected value style="display:none;">—请选择一个值</option> . <option >Data 1</option> . <option >Data 2</option> <option >Data 3</option> . < /选择>

试试这个:

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

在HTML5中验证。在选择元素中使用所需属性。可以重新选择。适用于谷歌Chrome 45, Internet Explorer 11, Edge, Firefox 41。

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

试试这个:

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

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

我只想说一句:

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

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

由于“disabled”属性，它无论如何都不会被主动选择。

也许这个会有帮助

<选择> <option disabled selected value>——选择一个选项——</option> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>

——select an option——默认显示。但是如果你选择了一个选项，你将不能再选择它。

您也可以通过添加一个空选项来隐藏它

<选择风格= "显示:没有" >

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

选项2

如果你不想写CSS，并期望上面的解决方案具有相同的行为，只需使用:

<option hidden disabled selected value>——选择一个选项——</option> .