HTML <option> 標簽

定義和用法

<option> 標簽定義選擇列表中的選項。

<option> 元素位于 <select>、<optgroup> 或 <datalist> 元素內。

注意：<option> 標簽可以在沒有任何屬性的情況下使用，但您通常需要 value 屬性，它指示在表單提交時發送到服務器的內容。

提示：如果您有很長的選項列表，您可以在 <optgroup> 標簽內對相關選項進行分組。

另請參閱：

HTML DOM 參考手冊：Option 對象

實例

例子 1

包含四個選項的下拉列表：

<label for="cars">請選擇一個汽車品牌：</label>
<select id="cars">
  <option value="audi">奧迪</option>
  <option value="byd">比亞迪</option>
  <option value="geely">吉利</option>
  <option value="volvo">沃爾沃</option>
</select>

親自試一試

例子 2

在 <datalist> 元素中使用 <option>：

<label for="browser">請從列表中選擇您的瀏覽器：</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

親自試一試

例子 3

在 <optgroup> 元素中使用 <option>：

<label for="cars">請選擇一個汽車品牌：</label>
<select id="cars">
  <optgroup label="中國車">
    <option value="byd">比亞迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="德國車">
    <option value="mercedes">奔馳</option>
    <option value="audi">奧迪</option>
  </optgroup>
</select>

親自試一試

屬性

屬性 值 描述
disabled disabled 規定選項應該被禁用。
label 文本 為選項規定較短的標簽。
selected selected 規定在頁面加載時應預先選擇一個選項。
value 文本 規定要發送到服務器的值。

全局屬性

<option> 標簽還支持 HTML 中的全局屬性。

事件屬性

<option> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

無。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持