<select>：HTML Select 元素

試一試

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

上面的示例展示了典型的 <select> 用法。它被賦予一個 id 屬性，以便與 <label> 關聯以實現可訪問性，以及一個 name 屬性來表示提交到伺服器的關聯資料點的名稱。每個選單選項由巢狀在 <select> 中的 <option> 元素定義。

每個 <option> 元素都應具有一個 value 屬性，其中包含該選項被選中時要提交到伺服器的資料值。如果未包含 value 屬性，則該值預設為元素中包含的文字。您可以在 <option> 元素上包含 selected 屬性，以便在頁面首次載入時預設選中它。如果未指定 selected 屬性，則預設選擇第一個 <option> 元素。

<select> 元素在 JavaScript 中由 HTMLSelectElement 物件表示，此物件具有一個 value 屬性，其中包含所選 <option> 的值。

<select> 元素具有一些可用於控制它的獨特屬性，例如 multiple 用於指定是否可以選擇多個選項，以及 size 用於指定一次應顯示多少個選項。它還接受大多數通用表單輸入屬性，例如 required、disabled、autofocus 等。

您可以進一步將 <option> 元素巢狀在 <optgroup> 元素中，以在下拉列表中建立單獨的選項組。您還可以包含 <hr> 元素來建立分隔符，從而在選項之間新增視覺分隔。

有關更多示例，請參見原生表單小部件：下拉內容。

屬性

此元素包含全域性屬性。

autocomplete

一個字串，為使用者代理的自動完成功能提供提示。有關值的完整列表以及如何使用自動完成的詳細資訊，請參閱HTML 自動完成屬性。

autofocus

此布林屬性允許您指定在頁面載入時表單控制元件應具有輸入焦點。文件中只有一個表單元素可以具有 autofocus 屬性。

disabled

此布林屬性表示使用者無法與控制元件互動。如果未指定此屬性，則控制元件從其包含元素（例如 <fieldset>）繼承其設定；如果沒有設定 disabled 屬性的包含元素，則控制元件處於啟用狀態。

form

與 <select> 關聯的 <form> 元素（其表單所有者）。此屬性的值必須是同一文件中 <form> 的 id。（如果未設定此屬性，則 <select> 將與其祖先 <form> 元素關聯，如果有的話。）

此屬性允許您將 <select> 元素關聯到文件中任何位置的 <form>，而不僅僅是在 <form> 內部。它還可以覆蓋祖先 <form> 元素。

multiple

此布林屬性指示可以在列表中選擇多個選項。如果未指定，則一次只能選擇一個選項。指定 multiple 時，大多數瀏覽器將顯示一個可滾動列表框，而不是單行下拉列表。多個選定的選項使用 URLSearchParams 陣列約定提交，即 name=value1&name=value2。

name

此屬性用於指定控制元件的名稱。

required

一個布林屬性，指示必須選擇具有非空字串值的選項。

size

如果控制元件以滾動列表框的形式呈現（例如，當指定 multiple 時），則此屬性表示列表中應一次可見的行數。瀏覽器不需要將選擇元素呈現為滾動列表框。預設值為 0。

注意：根據 HTML 規範，size 的預設值應為 1；然而，在實踐中，這已被發現會破壞一些網站，並且目前沒有其他瀏覽器這樣做，因此 Mozilla 已選擇暫時繼續為 Firefox 返回 0。

用法說明

選擇多個選項

在桌面計算機上，有多種方法可以在具有 multiple 屬性的 <select> 元素中選擇多個選項

滑鼠使用者可以按住 Ctrl、Command 或 Shift 鍵（取決於您的作業系統），然後單擊多個選項以選擇/取消選擇它們。

鍵盤使用者可以透過以下方式選擇多個連續專案

• 將焦點放在 <select> 元素上（例如，使用 Tab）。
• 使用 Up 和 Down 游標鍵選擇他們想要選擇的範圍的頂部或底部專案，以在選項中上下移動。
• 按住 Shift 鍵，然後使用 Up 和 Down 游標鍵增加或減少選定專案的範圍。

鍵盤使用者可以透過以下方式選擇多個不連續專案

• 將焦點放在 <select> 元素上（例如，使用 Tab）。
• 按住 Ctrl 鍵，然後使用 Up 和 Down 游標鍵更改“聚焦”選擇選項，即如果您選擇這樣做，將被選中的選項。“聚焦”選擇選項以虛線輪廓突出顯示，與鍵盤聚焦連結的方式相同。
• 按 Space 選擇/取消選擇“聚焦”選擇選項。

使用 CSS 樣式

<select> 元素在歷史上一直難以透過 CSS 進行有效樣式設定，因此引入了功能以建立完全可定製的選擇元素。

傳統選擇樣式

在不支援現代自定義功能（或無法使用它們的舊程式碼庫）的瀏覽器中，您只能操作盒模型、顯示的字型等。您還可以使用 appearance 屬性來刪除預設的系統 appearance。

然而，使用傳統的 <select> 元素很難在不同瀏覽器中獲得一致的結果。如果您想獲得完全控制，您應該考慮使用一個具有良好表單小部件樣式功能的庫，或者嘗試使用非語義元素、JavaScript 和 WAI-ARIA 來建立自己的下拉選單，以提供語義。

您可以使用 :open 偽類來樣式化處於開啟狀態的 <select> 元素，即當下拉選項列表顯示時。這不適用於多行 <select> 元素（那些設定了 multiple 屬性的元素）——它們傾向於呈現為滾動列表框而不是下拉列表，因此沒有開啟狀態。

有關傳統 <select> 樣式的更多資訊，請參閱

• HTML 表單樣式
• HTML 表單高階樣式
• field-sizing 屬性，控制 <select> 元素與其包含選項的關係大小。

無障礙

<select> 中的 <hr> 應被視為純粹的裝飾性元素，因為它們目前未在輔助功能樹中公開，因此無法暴露給輔助技術。

示例

基本選擇

以下示例建立一個三值下拉選單，其中第二個選項預設選中。

<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

結果

帶分組選項的選擇

以下示例建立一個使用 <optgroup> 和 <hr> 進行分組的下拉選單，以便使用者更容易理解下拉列表中的內容。

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

結果

具有多項高階功能的選擇

以下示例更為複雜，展示了您可以在 <select> 元素上使用的更多功能

<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

結果

你會看到

• 因為我們包含了 multiple 屬性，所以可以選擇多個選項。
• size 屬性導致一次只顯示 4 行；您可以滾動檢視所有選項。
• 我們包含了 <optgroup> 元素，將選項劃分為不同的組。這是一個純粹的視覺分組，其視覺化通常包括組名加粗，選項縮排。
• “Hamster”選項包含 disabled 屬性，因此根本無法選擇。

技術摘要

規範

瀏覽器相容性

另見

• <select> 觸發的事件：change、input
• <option> 元素
• <optgroup> 元素
• 可定製的 select 元素