html select标簽選擇事件_HTML option 标簽

1. <option>标簽應用浏覽器

所有浏覽器都支援 <option> 标簽。

2. 定義和用法

option 元素定義下拉清單中的一個選項（一個條目）。浏覽器将 <option> 标簽中的内容作為 <select> 标簽的菜單或是滾動清單中的一個元素顯示。

option 元素位于 select 元素内部。

<option> 标簽可以在不帶有任何屬性的情況下使用，但是您通常需要使用 value 屬性，此屬性會訓示出被送往伺服器的内容。

此标簽一定要與select 元素配合使用，否則這個标簽是沒有意義的。

如果清單選項很多，可以使用 <optgroup> 标簽對相關選項進行組合。

3. HTML 與 XHTML 之間的差異

在 HTML 中，<option> 沒有結束标簽。

在 XHTML 中，<option> 必須被正确關閉。

4. 可選的屬性

<option> 标簽支援 HTML 中的一些可以選擇的屬性。

屬性值描述

disabled disabled 規定某個選項應該被禁用。被禁用的選項既不可用，也不可點選

label text 規定更短版本的選項。下拉清單中會顯示出所規定的更短版本。

selected selected 規定選項（在首次顯示在清單中時）表現為選中狀态。

value text 定義送往伺服器的選項值。

Disabled

可以設定 disabled 屬性，直到滿足某些條件（比如選擇一個複選框），才恢複使用者對該選項的使用。然後，可以使用 JavaScript 來清除 disabled 屬性，以使選項變為可用狀态。

select>
  <

4 個選項的下拉清單中Opel已被禁用

Label

定義當使用 <optgroup> 時所使用的标注。

<select>
  <option label="Volvo">Volvo (Latin for "I roll")</option>
  <option label="Saab">Saab (Swedish Aeroplane AB)</option>
</select>

Selected

規定在頁面加載時預先標明該選項。被預選的選項會顯示在下拉清單最前面的位置。也可以在頁面加載後通過 JavaScript 設定 selected 屬性。

<select>
  <option>Volvo</option>
  <option selected="selected">Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

Value

<option> 與 <option/> 之間的值是浏覽器顯示在下拉清單中的内容，而 value 屬性中的值是表單被送出時被發送到伺服器的值。如果沒有指定 value 屬性，選項的值将設定為 <option> 标簽中的内容。

5. 全局屬性

<option> 标簽支援 HTML 中的全局屬性。

html select标簽選擇事件_HTML option 标簽

6. 事件屬性

<option> 标簽支援 HTML 中的事件屬性。

Window事件，keyboard事件，media事件，mouse事件，form事件

7. Start tag (<option>) not closed properly, expected '>'報錯

一定要注意<option>标簽的正确關閉

html select标簽選擇事件_HTML option 标簽

2020.5

繼續閱讀