HTML 下拉選單 select：option 與 optgroup 用法
常見的下拉選單功能，讓使用者進行單一選取或多項選取。它必須搭配 <option> 使用，選項一多還能用 <optgroup> 分組，要開放多選則加上 multiple；送出表單時拿到的是 value，不是畫面上顯示的文字。
<select>: 包覆各項選單的容器，不得單獨存在，必須與<option>、<optgroup>一起使用。<option>: 選單中的選項內容。<optgroup>: 可為選項內容進行不同的分組。
<select> 屬性
multiple
支援讓選項進行複選。
複選操作
配合 ctrl 鍵可進行單一多選，配合 shift 鍵可進行連續多選。
size
指定選項顯示的行數。
disabled
指定功能為不啟用的狀態。
<option> 屬性
value
用於提交 API 或 Server 的資料。
disabled
指定選項為不啟用的狀態。
selected
指定預先選取的狀態。
<optgroup> 屬性
label
設定選項群組的名稱（必填）。
disabled
指定群組為不啟用的狀態。
基本結構
html
<label for="city">居住城市</label>
<select id="city" name="city">
<option value="" disabled selected>請選擇</option>
<optgroup label="北部">
<option value="taipei">台北市</option>
<option value="taoyuan">桃園市</option>
</optgroup>
<optgroup label="中部">
<option value="taichung">台中市</option>
</optgroup>
</select>送出時拿到的是 value，不是使用者看到的文字；沒寫 value 才會退而使用文字內容。第一個選項加上 disabled selected 就成了不能被選走的預設提示。
小提醒
展開後的選項清單由作業系統繪製，各平台長相不同、能用 CSS 改的有限。要完全自訂外觀通常得自己做一個下拉元件，此時鍵盤操作與無障礙都得自行補齊。
常見問題
送出後拿到的是選項文字還是 value？
是 value。沒有寫 value 時才會退而使用選項的文字內容。要讓後端拿到穩定的代碼，請明確為每個選項寫上 value。
怎麼做出 請選擇 這種預設提示？
放一個 value 為空字串的選項，並加上 disabled 與 selected，讓它顯示在最前面卻不能被選走。搭配 required 就能要求使用者一定要改選其他項目。
select 的樣式可以自由設計嗎？
外框可以用 CSS 調整，但展開後的選項清單是由作業系統繪製的，各平台長相不同、能改的有限。要完全自訂外觀通常得自己做一個下拉元件，此時鍵盤操作與無障礙都要自行補齊。
select 裡可以只放 option 嗎？
可以，<option> 是必要的子元素；<optgroup> 則是選用，只有需要替選項分組時才加。
