內建瀏覽器 <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>