在 HTML 中選擇預設值

本文說明如何將 HTML 下拉式選單中的某個選項設為初始選項。將 selected 屬性加在 <select> 內你想預先選取的 <option> 上。你可以為屬性指定明確的值，也可以使用不帶值的布林形式。下方兩個範例使用相同的選項和值，方便你直接比較這兩種寫法。

使用 selected="selected" 設定預設選項

在頁面首次載入時要選取的選項起始標籤中，寫上 selected="selected"。此屬性應加在 <option> 上，而不是 <select> 上，也不是寫成獨立的 <selected> 標籤。在此範例中，第三個選項會在初始載入時被選取，其提交值為 3。

被選取的選項會留在清單中的原有位置。加入此屬性會設定初始選項，但不會將該選項移到其他選項前面。使用者可以改選其他選項，而新選項便會成為目前的選擇。

name 屬性會為控制項指定表單欄位名稱；送出表單時，被選取選項的 value 會作為該欄位的值。for 和 id 值相符時，標籤便會與控制項建立關聯，讓使用輔助科技的人也能理解所選的值。如果頁面需要以其他選項作為初始選項，請將 selected 屬性移到該選項上。

以下 HTML 是靜態標記範例，用來呈現頁面原始碼，並非執行結果。

<label for="number">Choose a number:</label>
<select id="number" name="number">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected="selected">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

此可執行的 JavaScript 範例會模擬標記中的選項值，並回報標示為已選取之選項的值。瀏覽器中的實際行為則由上方的 HTML 範例呈現。

const options = [
  { value: "1", selected: false },
  { value: "2", selected: false },
  { value: "3", selected: true },
  { value: "4", selected: false },
  { value: "5", selected: false },
];

const initialValue = options.find((option) => option.selected).value;
console.log(initialValue);

3

使用布林屬性 selected

selected 是布林屬性：只要有這個屬性，該選項就會成為初始選項。在 HTML 中，你可以省略屬性值，寫成 selected；也可以使用上方的明確寫法 selected="selected"。在此處，兩種寫法表示相同的選取設定；屬性名稱必須維持為 selected。

在這個相對照的範例中，第二個選項是初始選項。它的 value 是 2，顯示給讀者的文字則是 Two。每個選項都設定 value，可清楚區分表單值與顯示標籤。如果讀者尚未更改選項就送出表單，送出的會是目前已選取選項的值。

想使用精簡的 HTML 時，可以採用這種布林寫法。請將它加在你要選取之選項的起始標籤內。不要在選項後面寫 <selected>：那不是此屬性的語法。選項仍會留在清單原有的位置，讀者也可以改選其他值。

這同樣是靜態標記範例，並非執行時的輸出清單。

<label for="number-short">Choose a number:</label>
<select id="number-short" name="number">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>