内置浏览器 <option> 组件 允许你在 <select> 框中呈现一个选项。

🌐 The built-in browser <option> component lets you render an option inside a <select> box.

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

参考

🌐 Reference

<option>

内置浏览器 <option> 组件 允许你在 <select> 框中呈现一个选项。

🌐 The built-in browser <option> component lets you render an option inside a <select> box.

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

查看更多示例。

属性

🌐 Props

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

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

🌐 Additionally, <option> supports these props:

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

注意事项

🌐 Caveats

  • React 不支持在 <option> 上使用 selected 属性。相反，应将此选项的 value 传递给父级的 <select defaultValue>（用于非受控选择框）或 <select value>（用于受控选择框）。

用法

🌐 Usage

显示带有选项的选择框

🌐 Displaying a select box with options

使用一个 <select> 并在其中包含一列 <option> 组件来显示一个选择框。给每个 <option> 一个 value，表示要随表单提交的数据。

🌐 Render a <select> with a list of <option> components inside to display a select box. Give each <option> a value representing the data to be submitted with the form.

阅读有关如何使用 <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>