本文介绍一种可靠的方法，通过 html 下拉菜单与按钮触发的方式，将多个选择项（如赛事系列、年份）动态拼接为完整的 url 查询字符串，避免手动处理已有参数的复杂逻辑。
本文介绍一种可靠的方法，通过 html 下拉菜单与按钮触发的方式，将多个选择项（如赛事系列、年份）动态拼接为完整的 url 查询字符串，避免手动处理已有参数的复杂逻辑。
在 Web 开发中，直接通过
更健壮的解决方案是解耦选择与提交：用纯
以下是推荐实现：
<center>
<select id="seasondropdown" class="scheduledropdown" size="1" name="series"><option value="">-- 选择系列 --</option>
<option value="latemodels">Late Models</option>
<option value="modifieds">Modifieds</option></select><select id="yeardropdown" class="scheduledropdown" size="1" name="year"><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 series = seasonSelect.value;
const year = yearSelect.value;
// 构建基础路径
let url = '/results';
// 拼接查询参数（自动处理 ? 和 &）
const params = new URLSearchParams();
if (series) params.set('series', series);
if (year) params.set('year', year);
if (params.toString()) {
url += '?' + params.toString();
}
window.location.href = url;
});
</script>
✅ 关键改进点说明：
- 使用 URLSearchParams API 自动处理参数编码、分隔符（? / &）及空值过滤，避免手拼字符串引发的格式错误；
- 下拉选项值仅保留语义化数据（如 "latemodels"），而非完整 URL，提升可维护性与安全性；
- 移除冗余的 onchange 自跳转逻辑，彻底规避多选冲突；
- 添加空选项提示（-- 选择系列 --），提升用户体验；
- 使用 addEventListener 替代内联事件，符合现代 JavaScript 最佳实践。
⚠️ 注意事项：
- 若需支持浏览器后退/刷新时保持选中状态，可在页面加载时读取当前 URL 的查询参数，并用 select.value = paramValue 同步下拉框；
- 生产环境建议对用户输入做基础校验（如白名单限制 series 值），防止恶意参数注入；
- 如需实时预览 URL，可在按钮旁添加 并在点击前更新其内容。
该方案简洁、可扩展、兼容主流浏览器（IE11+ 需 polyfill URLSearchParams），是构建多条件筛选 URL 的推荐模式。
