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

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

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 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 

我希望这也能帮助到某些人。再接再厉!

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

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

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

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

您可以使用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属性，那么在大多数现代浏览器中，它们最初都不会被选中。