JavaScript 根據資料庫數值動態設定 Select 下拉選單選中項

場景

資料庫儲存學歷代碼 (1=高中, 2=專科, 3=大學...)，頁面載入時需讓 <select> 顯示對應中文。

方案一：前端映射表 (最簡單、效能佳)

<select id="user_edu">
  <option value="1">高中及以下</option>
  <option value="2">大專</option>
  <option value="3">本科</option>
  <option value="4">研究生</option>
  <option value="5">博士及以上</option>
</select>

<script>
// 後端渲染或 AJAX 取得的代碼
const eduCode = 3; // 例如 ${userInfo.userSchool}

document.getElementById('user_edu').value = eduCode; // 直接設定 value，瀏覽器自動選中對應 option
</script>

方案二：動態建立選項 (資料驅動)

const eduMap = [
  { value: 1, text: '高中及以下' },
  { value: 2, text: '大專' },
  { value: 3, text: '本科' },
  { value: 4, text: '研究生' },
  { value: 5, text: '博士及以上' }
];

const select = document.getElementById('user_edu');
select.innerHTML = ''; // 清空
eduMap.forEach(item => {
  const opt = document.createElement('option');
  opt.value = item.value;
  opt.textContent = item.text;
  select.appendChild(opt);
});
select.value = eduCode; // 設定選中

方案三：顯示中文於 Span (非下拉選單)

<span id="user_school_show" data-code="3"></span>

<script>
const code = document.getElementById('user_school_show').dataset.code;
const text = eduMap.find(item => item.value == code)?.text || '';
document.getElementById('user_school_show').textContent = text;
</script>

後端直接輸出中文 (最省事)

若無前端互動需求，後端查詢時 JOIN 或 CASE WHEN 直接回傳中文，前端直接顯示：

SELECT CASE edu_code 
  WHEN 1 THEN '高中及以下' 
  WHEN 2 THEN '大專' 
  ... 
END AS edu_name FROM user_profile WHERE id = ?

關鍵點

• select.value = code 是設定下拉選單最直接的方法，瀏覽器自動匹配 option[value]。
• 映射表 (陣列/物件) 應集中管理，避免重複硬編碼。
• 資料量大時，考慮 <datalist> + <input list> 或搜尋式下拉元件 (Select2, Choices.js)。

善用 select.value 屬性與集中映射表，即可輕鬆實現代碼與顯示文字的雙向轉換。