我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
当前回答
对于那些使用<select multiple> (combobox;没有下拉),这对我来说很管用:
<select size=1 disabled multiple> . <select size=1 disabled multiple> . <option hidden selected></option> 我<选项>选项> < /选项 < /选择>
其他回答
为了显示,请在下拉菜单中选择一个值,并在选择某个值后隐藏它。请使用下面的代码。
它还将支持所需的验证。
<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 data-isdefault="true">--Choose one Option--</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
这样,它将保持不可提交,但可以随时选择。用户界面更方便,用户体验更好。
好了,就这些了,希望能有所帮助。干杯!
如果你使用的是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>
对于那些使用<select multiple> (combobox;没有下拉),这对我来说很管用:
<select size=1 disabled multiple> . <select size=1 disabled multiple> . <option hidden selected></option> 我<选项>选项> < /选项 < /选择>
我想一个好主意是使用单选按钮,设置#1为默认并隐藏它,给它一个例子 Name ="init"和一个值="null"或其他什么,由你决定!
这样单选按钮列表肯定有一个值,但默认为null可以在逻辑上使用!
我认为没有必要进一步阐述,因为这个想法可以很容易地通过显示来实现:没有;或者可见性:隐藏;
... 而我认为第一个显示:没有;是更好的选择: