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

我不能用这个,

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

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


当前回答

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

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

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

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

其他回答

我使用Laravel 5框架和@Gambi的答案也适用于我,但对我的项目做了一些更改。

我在一个数据库表中有选项值,我用foreach语句使用它们。但在声明之前,我已经添加了一个选项与@Gambit建议设置,它工作。

以下是我的例子:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset 

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

也许这个会有帮助

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

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

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

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

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

选项2

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

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

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

这应该会有帮助:

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

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

试试这个:

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

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