我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
我有一个非常奇怪的要求,其中我被要求在HTML下拉菜单中没有默认选择的选项。然而,
我不能用这个,
<选择> <选项> < /选项> <选项>选项1 > < /选项 <选项>选项2 > < /选项 <选项>选项3 > < /选项 < /选择>
因为,对于这个,我必须做验证来处理第一个选项。有人能帮助我实现这个目标,而不实际包括第一个选项作为选择标签的一部分吗?
当前回答
在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>
其他回答
我只想说一句:
一些Safari浏览器似乎既不尊重“hidden”属性,也不尊重样式设置“display:none”(在MacOS 10.12.6下使用Safari 12.1测试)。没有显式的占位符文本,这些浏览器只是在选项列表中显示一个空的第一行。因此,为这个“虚拟”条目提供一些解释性文本可能是有用的:
<option hidden disabled selected value>(select an option)</option>
由于“disabled”属性,它无论如何都不会被主动选择。
也许这个会有帮助
<选择> <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>
我使用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 multiple> (combobox;没有下拉),这对我来说很管用:
<select size=1 disabled multiple> . <select size=1 disabled multiple> . <option hidden selected></option> 我<选项>选项> < /选项 < /选择>