使用 内置浏览器 <option> 组件 可以在 <select> 框中渲染一个选项。

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

参考

<option>

使用 内置浏览器 <option> 组件 可以在 <select> 框中渲染一个选项。

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

请参阅下面的更多示例。

属性

<option> 支持所有 通用元素属性。

此外，<option> 还支持以下属性

  • disabled：布尔值。如果为 true，则该选项将不可选，并且将显示为灰色。
  • label：字符串。指定选项的含义。如果未指定，则使用选项内的文本。
  • value：如果选择此选项，则在提交表单中父级 <select> 时要使用的值。

注意事项

  • React 不支持 <option> 上的 selected 属性。对于不受控的下拉框，请将此选项的 value 传递给父级 <select defaultValue>；对于受控的下拉框，请传递给 <select value>。

用法 显示带有选项的下拉框

渲染一个包含 <option> 组件列表的 <select> 以显示下拉框。为每个 <option> 提供一个 value 属性，表示要与表单一起提交的数据。

了解更多关于使用 <option> 组件列表显示 <select> 的信息。

export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}
上一页<input>
下一页<progress>