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

没有HTML解决方案。根据HTML 4.01规范，如果没有一个选项元素具有selected属性，那么浏览器的行为是未定义的，而浏览器在实践中所做的是使第一个选项预选。

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

也许这个会有帮助

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

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

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

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

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

选项2

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

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

今天(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传递一个空白):

<option>&#160;</option>

之前(2013-08-02)

根据我的笔记，在2013年，上面所示的选项标签内的非间断空格实体产生了以下错误:

错误:W3C Markup Validaton Service (Public):第一个子选项 属性的选择元素的 多个属性，其大小为1，必须为空 值属性，否则必须没有文本内容。

当时，一个普通的空格是有效的XHTML4，并从每个浏览器发送一个空白(不是空格)到服务器:

<option> </option>

未来

如果规范更新到明确允许空白选项，我会很高兴。最好使用最简洁的语法。以下任何一个都很好:

<option />
<option></option>

测试文件

<！DOCTYPE html > < html > < >头 <meta http-equiv=" content - type " content="text/html;utf - 8字符集= " / > <标题>测试< /名称> > < /头 <身体> <form action="index.html" method="post"> <选择name = "选取" > <option label=" "></option> . < /选择> > < /形式 < /身体> < / html >

试试这个:

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

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

< td > < b >字段标签:< / b > < br > <选择风格= '对齐:左;' id='some_id' name='some_name'> .宽度:100% <option hidden selected>选择一个 <选项值=“Value1”> OptLabel1 > < /选项 <选项值= Value2的> OptLabel2 > < /选项 <选项值= ' Value3 ' > OptLabel3 < /选项> < /选择> 道明> < /

只需把“隐藏”选项你想隐藏下拉列表。

<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

<选择> <选择风格= "显示:没有;" > < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>

B: CSS样式表

如果你有一个CSS文件在手，你可以针对第一个选项使用:

选择。first-opt隐藏选项:first-of-type { 显示:没有; ｝ <选择类= " first-opt-hidden " > <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>

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

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

我明白你想做什么。最好和最成功的方法是:

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

这应该会有帮助:

https://www.w3schools.com/tags/att_select_required.asp

< >形式 需要<选择> <选项值= " " > < /选项>没有 沃尔沃<选项值=“沃尔沃”> < /选项> 萨博<选项值= "萨博" > < /选项> <选项值= "奔驰" >奔驰> < /选项 <选项值=“奥迪”>奥迪> < /选项 < /选择> <按钮类型=“提交”> > < /按钮提交 > < /形式

我觉得这很有趣，因为不久以前我也经历过同样的事情。 然而，我在互联网上看到了一个关于这个解决方案的例子。

话不多说，请看下面的代码片段:

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

这样，它将保持不可提交，但可以随时选择。用户界面更方便，用户体验更好。

好了，就这些了，希望能有所帮助。干杯!

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

它还将支持所需的验证。

<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> . < /选择>

我只想说一句:

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

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

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

如果你使用的是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>

如果一开始你不需要任何空选项，试试第一行:

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

只要用“..”选项隐藏选择..”作为默认选项

对于那些使用<select multiple> (combobox;没有下拉)，这对我来说很管用:

<select size=1 disabled multiple> . <select size=1 disabled multiple> . <option hidden selected></option> 我<选项>选项> < /选项 < /选择>

我想一个好主意是使用单选按钮，设置#1为默认并隐藏它，给它一个例子 Name ="init"和一个值="null"或其他什么，由你决定!

这样单选按钮列表肯定有一个值，但默认为null可以在逻辑上使用!

我认为没有必要进一步阐述，因为这个想法可以很容易地通过显示来实现:没有;或者可见性:隐藏;

．.． 而我认为第一个显示:没有;是更好的选择:

在react中，你可以用下面的选择标签给出一个虚拟值(比如-1)，同样的值可以用你的这个禁用选项。(为我工作)

const nonEmpty = selected[identifierField] || false;

<select
    onChange={(e) => {
      onSelect(
        options.find((option) => option[identifierField] === e.target.value)
      );
    }}
    value={nonEmpty || -1}
  >
    <option disabled value={-1}>Select Option</option>
    {options.map((option) => (
      <option key={option[identifierField]} value={option[identifierField]}>
        {option[displayField]}
      </option>
    ))}
  </select>

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

平板电脑:iPad Pro / iOS 15 / Safari的糟糕解决方案 下拉菜单中出现了一个不必要的行，仅用于实际设备。不会在模拟器上重现。