下拉選單 <select>、<option>、<optgroup>

<select>、<option> 和 <optgroup> 是 HTML 表單裡的下拉選單元素，<select> 是下拉選單的主體，而 <option>、<optgroup> 則構成下拉選單的選項以及選項群組，這篇文章將會介紹下拉選單元素的用法。

認識 <select>、<option> 和 <optgroup>

<select>、<option> 和 <optgroup> 是 HTML 表單裡的下拉選單元素，<select> 是下拉選單的主體，而 <option>、<optgroup> 則構成下拉選單的選項以及選項群組。

• <select>、<option> 和 <optgroup> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」。
• <select> 的顯示類型為「inline-block 行內區塊元素」，預設不會強制換行。
• <select> 不可以是 <a> 或 <button> 的子元素。
• <optgroup> 只能是 <select> 的子元素。
• <option> 只能是 <select> 和 <optgroup> 的子元素。

例如下方的 HTML 開啟後，在網頁中會放入一個 <select>、<option> 和 <optgroup> 所構成的下拉選單。

<form action="/test.aspx" method="post">
  <select>
    <optgroup label="iPhone">
      <option value="14p">iPhone 14 Pro</option>
      <option value="14">iPhone 14</option>
      <option value="13p">iPhone 13 Pro</option>
    </optgroup>
    <optgroup label="iPad">
      <option value="air">iPad Air</option>
      <option value="pro">iPad Pro</option>
    </optgroup>
  </select>
</form>

<select>、<option> 和 <optgroup> 支援屬性

<select>、<option> 和 <optgroup> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，也會使用下方的專門屬性：

<select> 相關屬性：

<optgroup> 相關屬性：

<option> 相關屬性：

例如下方的 HTML 開啟後，加入相關的屬性，就能控制選單的呈現方式。

<form action="test.aspx" method="get">
  <select>
    <optgroup label="iPhone" multiple>
      <option value="14p">iPhone 14 Pro</option>
      <option value="14" selected>iPhone 14</option>
      <option value="13p" disabled>iPhone 13 Pro</option>
    </optgroup>
    <optgroup label="iPad" disabled>
      <option value="air">iPad Air</option>
      <option value="pro">iPad Pro</option>
    </optgroup>
  </select>
</form>

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～