本文介绍一种可靠的方法，通过两个下拉菜单（系列与年份）动态构建带多个查询参数的 url，并避免重复或冲突的参数拼接问题。
本文介绍一种可靠的方法，通过两个下拉菜单（系列与年份）动态构建带多个查询参数的 url，并避免重复或冲突的参数拼接问题。
在实际 Web 开发中，仅靠 onchange="window.location.href=this.value" 硬编码 URL 无法灵活处理多参数组合（如先选系列、再选年份），尤其当用户切换选项时容易丢失已有参数或产生重复问号（?）、冲突键名（如多次出现 ?year=）。推荐采用集中式表单提交逻辑：将各下拉框解耦为独立控件，由统一按钮触发 URL 构建，确保参数可叠加、可校验、可扩展。
以下是一个完整、健壮的实现方案：
<center>
<select id="seasondropdown" class="scheduledropdown" size="1"><option value="">— 选择系列 —</option>
<option value="/results">Combined</option>
<option value="/results?series=latemodels">Late Models</option>
<option value="/results?series=modifieds">Modifieds</option></select><select id="yeardropdown" class="scheduledropdown" size="1"><option value="">— 选择年份 —</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option></select><button id="btnSubmit">应用筛选</button>
</center>
<script>
const seasonSelect = document.getElementById('seasondropdown');
const yearSelect = document.getElementById('yeardropdown');
const submitBtn = document.getElementById('btnSubmit');
submitBtn.addEventListener('click', function(e) {
e.preventDefault();
const base = seasonSelect.value || '/results';
const year = yearSelect.value;
// 解析当前 base URL 的路径和已有参数
const url = new URL(base, window.location.origin);
// 清除旧 year 参数，避免重复
url.searchParams.delete('year');
// 添加/更新 series（若 base 中已含 series，则保留；否则不添加）
// 注意：此处假设 base 已含完整路径+参数，故不再覆盖 series
// 仅当用户选择了有效年份才设置
if (year) {
url.searchParams.set('year', year);
}
window.location.href = url.toString();
});
</script>
✅ 关键改进点说明：
- 使用 URL 和 URLSearchParams API 实现参数安全合并，自动处理 ?、&、编码及去重；
- 年份下拉项值设为纯数字（非带 ?year= 的字符串），避免手动拼接错误；
- 支持“无选择”状态（空 option），提升用户体验；
- searchParams.delete('year') 确保每次提交只保留最新年份，防止 URL 膨胀；
- 不依赖 onchange 自动跳转，避免误操作导致页面频繁刷新。
? 注意事项：
- 若需支持「实时联动」（如选系列后年份下拉自动加载对应数据），应结合 AJAX + 动态渲染，而非仅靠前端 URL 拼接；
- 生产环境建议对 seasonSelect.value 做白名单校验，防止恶意 URL 注入；
- 如需保留当前其他参数（如 ?page=2），URL 构造器会自动继承，无需额外处理。
该方案兼顾简洁性与健壮性，是处理多条件 URL 参数组合的推荐实践。
