我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
当前回答
如果一开始你不需要任何空选项,试试第一行:
<option style="display:none"></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>
在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>
试试这个:
<select>
<option value="">
<option>Option 1
<option>Option 2
<option>Option 3
</select>
在HTML5中验证。在选择元素中使用所需属性。可以重新选择。适用于谷歌Chrome 45, Internet Explorer 11, Edge, Firefox 41。
为了显示,请在下拉菜单中选择一个值,并在选择某个值后隐藏它。请使用下面的代码。
它还将支持所需的验证。
<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> . < /选择>
只要用“..”选项隐藏选择..”作为默认选项