利用 window.onload 實現 Select 下拉框默認選項設置

技巧原理

在 <body> 標籤的 onload 事件中，通過 JavaScript 直接賦值給 select 元素的 value 屬性，即可在頁面加載完成後自動選中指定選項。無需在 HTML 中寫 selected，實現邏輯與結構分離。

完整示例

<?php
// PHP 端動態決定默認值，例如從數據庫讀取
$day = 3; // 星期三
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Select 默認選項演示</title>
</head>
<body onload="window.form1.day.value='<?php echo $day; ?>'">
<form action="" method="POST" id="form1" name="form1">
<select id="day" name="day" size="1">
  <option value="1">星期一</option>
  <option value="2">星期二</option>
  <option value="3">星期三</option>
  <option value="4">星期四</option>
  <option value="5">星期五</option>
  <option value="6">星期六</option>
  <option value="7">星期日</option>
</select>
</form>
</body>
</html>

關鍵點

• window.form1.day.value：利用 DOM 0 級集合直接訪問 name="form1" 表單下 name="day" 的 select 元素
• onload 確保 DOM 就緒後執行，避免元素未渲染報錯
• PHP 只需輸出變量值，邏輯極簡

擴展應用

• 多個下拉框聯動初始化（省市區、分類子分類）
• 從 Cookie/LocalStorage 恢復用戶上次選擇
• 配合 AJAX 獲取默認值後再設置
• 現代寫法：document.addEventListener('DOMContentLoaded', () => { document.querySelector('[name=day]').value = '...'; });

優缺點對比