我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,

我不能用这个,

<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>

因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?


当前回答

试试这个:

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

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

其他回答

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

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

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

它还将支持所需的验证。

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

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

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

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

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

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

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