HTML 下拉式選單 - <select>, <option>, <optgroup> 標籤 (tag)

<select> 用來建立下拉式選單 (dropdown menu)，讓使用者可以從一堆選項中選擇出一個或多個選項。

<select> 本身做為選單的容器，在 select 裡面用 <option> 標籤來建立個別選項。

舉個例子：

<select>
    <option>請選擇你最愛的寵物</option>
    <option>Dog</option>
    <option>Cat</option>
    <option>Hamster</option>
    <option>Parrot</option>
    <option>Spider</option>
    <option>Goldfish</option>
</select>

顯示結果：

<select> 標籤上可以用的屬性 (attributes)

  • name: 聲明欄位名稱
  • disabled: 將欄位設定為禁用的狀態，是一個布林 (boolean) 屬性
  • required: 將欄位設定為必填，是一個布林 (boolean) 屬性

<option> 選單中的選項

<option> 是用來建立選項，而選項內容放在 <option></option> 標籤裡面。

<option> 標籤上有這些屬性：

  • value: 指定如果選了該選項，表單要傳送什麼值給遠端伺服器，如果沒設定 value，預設是送 <option> 的內容
  • selected: 設定預先選取此選項，是一個布林屬性
  • label: 說明選項的含義，有設定時會被瀏覽器顯示為選項內容，通常用來當做簡短版的選項文字
  • disabled: 將選項設定為不可選的狀態，是一個布林 (boolean) 屬性

綜合上面講到的屬性，舉個比較完整的下拉選單範例：

<select name="pets">
    <option value="">請選擇你最愛的寵物</option>
    <option value="dog">Dog</option>
    <option value="cat" selected>Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider" disabled>Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

顯示結果：

可多選的選單 - <select> 的 multiple 和 size 屬性

multiple 用來設定該選單中的選項可以被多選。

舉個例子：

<select name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="bmw">BMW</option>
  <option value="saab">Saab</option>
  <option value="benz">Benz</option>
  <option value="audi">Audi</option>
</select>

顯示結果：

要多選的話，在 Windows 中是先按住 ctrl 鍵，再點選選項；在 Mac 中則是按住 command 鍵。

select 的 size 屬性

size 是用來指定一次讓使用者看到幾個選項，預設值是 1；但如果有設定 multiple 時，預設值則是 4。

例子：

<select name="cars" multiple size="5">
  <option value="volvo">Volvo</option>
  <option value="bmw">BMW</option>
  <option value="saab">Saab</option>
  <option value="benz">Benz</option>
  <option value="audi">Audi</option>
</select>

顯示結果：

<optgroup> 選項分區 (option group)

<optgroup> 可以用來將同樣性質的選項分做一區一區的來顯示，而在 <optgroup> 上有一個 label 屬性是用來設定該分區的名稱。

直接舉個例子：

<select name="catordog">
  <optgroup label="Cats">
    <option>Tiger</option>
    <option>Leopard</option>
    <option>Lynx</option>
  </optgroup>
  <optgroup label="Dogs">
    <option>Grey Wolf</option>
    <option>Red Fox</option>
    <option>Fennec</option>
  </optgroup>
</select>

顯示結果：