本文介绍一种简洁可靠的前端筛选方案：利用 html 表单原生 method="get" 自动构建查询字符串，无需 javascript 拼接 url，避免手动操作 dom 和潜在语法错误，同时天然支持浏览器后退、刷新和书签功能。
本文介绍一种简洁可靠的前端筛选方案：利用 html 表单原生 method="get" 自动构建查询字符串，无需 javascript 拼接 url，避免手动操作 dom 和潜在语法错误，同时天然支持浏览器后退、刷新和书签功能。
在构建数据筛选功能时，常见误区是过度依赖 JavaScript 手动拼接 URL（如 window.location.href = '...?year=2023&continent=Africa'），这不仅易出错（如漏掉 # 或引号、ID 选择器写错为 $('select_year')），还破坏了浏览器的原生导航能力（如无法回退、刷新丢失状态）。更优解是回归语义化 HTML——使用 <form method="get">。
以下是一个完整、可直接复用的示例：
<form method="get" action="view-report.php" class="form-inline">
<label for="select_year">Select Year: </label>
<select name="year" class="form-control input-sm" id="select_year">
<?php
date_default_timezone_set('Africa/Johannesburg');
$year_current = date('Y');
$year_selected = isset($_GET['year']) ? (int)$_GET['year'] : $year_current;
for ($y = 2019; $y <= $year_current; $y++) {
$selected = ($y === $year_selected) ? ' selected="selected"' : '';
echo "<option value=\"{$y}\"{$selected}>{$y}</option>";
}
?>
</select>
<label for="select_continent">Select Continent: </label>
<select name="continent" class="form-control input-sm" id="select_continent">
<?php
$continents = [
'Africa' => 'Africa',
'Americas/Central/South/Latin' => 'Americas',
'Asia' => 'Asia',
'Australia' => 'Australia',
'Europe' => 'Europe'
];
$continent_selected = $_GET['continent'] ?? '';
foreach ($continents as $value => $label) {
$selected = ($value === $continent_selected) ? ' selected="selected"' : '';
echo "<option value=\"{$value}\"{$selected}>{$label}</option>";
}
?>
</select>
<button type="submit" class="btn btn-primary">Filter</button>
</form>✅ 关键要点说明：
- method="get" + action="view-report.php" 使表单提交后自动跳转至 view-report.php?year=2024&continent=Africa；
- <select> 的 name 属性（如 name="year"）决定 URL 中的参数键名，PHP 后端可通过 $_GET['year'] 直接读取；
- PHP 动态渲染 selected 属性，确保用户切换后再次进入页面时，下拉框仍保持上次筛选状态；
- 所有选项值（value）应为安全、规范的字符串（避免空格/特殊字符；若必须含斜杠，URL 编码非必需，因 GET 表单会自动编码）；
- 不需要任何 JavaScript —— 简洁、健壮、无障碍友好、SEO 友好。
⚠️ 注意事项：
- 避免在 <select> 中重复相同 value（原问题中两个选项都设为 "Africa"，将导致逻辑歧义）；
- 建议对 $_GET 输入做基础校验（如 in_array($year, range(2019, date('Y')))），防止恶意参数；
- 如需“重置筛选”，可添加 <a href="view-report.php">Clear filters</a> 链接，或使用 <button type="reset">Reset</button>（但注意 reset 不会清空 URL 参数，仅重置表单控件）。
此方案兼顾开发效率、运行稳定性与用户体验，是服务端渲染场景下的最佳实践。
