我有一个非常奇怪的要求,其中我被要求在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>

其他回答

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在这种情况下,可以避免自定义验证。

对于那些使用<select multiple> (combobox;没有下拉),这对我来说很管用:

<select size=1 disabled multiple> . <select size=1 disabled multiple> . <option hidden selected></option> 我<选项>选项> < /选项 < /选择>

在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>

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

您可以使用Javascript来实现这一点。试试下面的代码:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select> 

JS

document.getElementById("myDropdown").selectedIndex = -1;

或JQuery

$("#myDropdown").prop("selectedIndex", -1);