<select>: HTML 選擇元素

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

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

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

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

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

有關更多示例，請參閱 本機表單小部件：下拉內容。

此元素包含 全域性屬性。

autocomplete

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

autofocus

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

disabled

此布林屬性指示使用者無法與控制元件互動。如果未指定此屬性，則控制元件將從包含元素繼承其設定，例如 <fieldset>；如果包含元素中沒有設定 disabled 屬性，則控制元件將被啟用。

form

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

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

multiple

此布林屬性指示可以在列表中選擇多個選項。如果未指定它，則一次只能選擇一個選項。當指定 multiple 時，大多數瀏覽器將顯示一個滾動列表框，而不是單行下拉選單。

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游標鍵更改“聚焦”的select選項，即如果您選擇這樣做，將被選擇的選項。“聚焦”的select選項會以虛線突出顯示，與鍵盤聚焦的連結相同。
• 按Space選擇/取消選擇“聚焦”的select選項。

<select>元素以 CSS 樣式化是出了名的困難。您可以影響某些方面，就像任何元素一樣——例如，操縱盒子模型、顯示的字型等，並且可以使用appearance屬性刪除預設的系統appearance。

但是，這些屬性在不同的瀏覽器中不會產生一致的結果，而且很難將不同型別的表單元素在同一列中對齊。<select>元素的內部結構很複雜，難以控制。如果您希望獲得完全控制權，則應考慮使用具有良好樣式化表單小部件功能的庫，或者嘗試使用非語義元素、JavaScript 和WAI-ARIA來滾動您自己的下拉選單以提供語義。

有關<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>元素