本文介绍一种简洁可靠的前端筛选方案：利用 HTML 表单的 method="get" 自动构建带查询参数的 URL，无需手动拼接或 JavaScript 干预，同时确保 PHP 端能正确回显已选选项。
本文介绍一种简洁可靠的前端筛选方案：利用 html 表单的 `method="get"` 自动构建带查询参数的 url，无需手动拼接或 javascript 干预，同时确保 php 端能正确回显已选选项。
在构建动态筛选功能时，许多开发者倾向于用 JavaScript 拼接 URL 实现跳转（如 window.location.href = 'view-report.php?year=2023&continent=Africa'），但这不仅容易出错（例如选择器写错、引号缺失、URL 编码遗漏），还增加了维护成本和潜在的安全风险（如未过滤的用户输入直接注入 URL）。实际上，原生 HTML 表单配合 method="get" 就能优雅、安全、语义化地完成这一任务。
✅ 推荐方案：纯 HTML + PHP 回显
将表单设置为 method="get" 并指定 action="view-report.php"，浏览器会自动将所有带 name 属性的 <select> 值以键值对形式拼接到 URL 查询字符串中（如 ?year=2023&continent=Africa）。PHP 端只需通过 $_GET 读取参数，并在渲染 <select> 时动态添加 selected 属性即可实现“筛选后保持选中状态”。
以下是优化后的完整代码示例：
<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 = $_GET['year'] ?? $year_current;
for ($i = 2019; $i <= $year_current; $i++) {
$selected = ($i == $year_selected) ? ' selected="selected"' : '';
echo "<option value=\"{$i}\"{$selected}>{$i}</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'] ?? null;
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>? 关键要点说明：
- <select> 必须带有 name 属性（如 name="year"），否则其值不会被提交；
- 使用 $_GET['key'] ?? $default 替代冗长的 isset() 判断，更简洁安全；
- 所有输出内容均经 PHP 变量插值生成，避免 XSS 风险（此处值为可控枚举，但若来源不可信，建议使用 htmlspecialchars() 转义）；
- for 循环替代手动硬编码选项，提升可维护性与年份扩展性。
⚠️ 注意事项与最佳实践
- 不要使用 JavaScript 模拟提交：除非需要异步加载（如 AJAX 分页），否则纯 GET 表单更可靠、可书签、支持浏览器前进/后退、天然兼容 SEO；
- 避免 ID 选择器误用：原 JS 中 $('select_year').val() 应为 $('#select_year').val()，且 id 选择器前需加 #；但本方案完全规避了此类错误；
- URL 编码自动处理：表单 GET 提交会自动对特殊字符（如空格、斜杠）进行 URL 编码，而手拼 URL 容易遗漏（如 Americas/Central/... 中的 / 需编码）；
- 服务端校验仍不可少：即使前端限制了选项，PHP 端仍应验证 $_GET['year'] 是否为合法整数、$_GET['continent'] 是否在白名单内，防止恶意参数注入。
通过此方案，你获得了一个零 JS 依赖、高可访问性、易调试、符合 Web 标准的筛选组件——简单，却足够强大。
