Javascript实现下拉选择追加URL参数 多参数拼接问题咨询

你原有代码无法保留多参数的核心原因是：所有选项的value硬编码了固定跳转地址，每次选择都会直接覆盖整个URL，自然无法保留另一个筛选项的参数。
以下是可直接复用的实现： #

第一步：调整HTML结构 #

移除选项里硬编码的完整路径，只保留参数值，移除内联跳转事件，给年份下拉框补充唯一id：

<center>
<select id="seasondropdown" class="scheduledropdown" size="1" name="links">
  <option value="">Combined</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>
</center>

第二步：添加联动逻辑JS #

把下面的代码放在页面底部即可：

// 读取当前URL指定参数值
function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name) || '';
}

// 基于当前URL参数，更新指定参数后生成新跳转地址
function generateJumpUrl(targetKey, targetValue) {
  const urlParams = new URLSearchParams(window.location.search);
  // 选中空选项时删除对应参数，避免URL出现无意义空值
  if (targetValue) {
    urlParams.set(targetKey, targetValue);
  } else {
    urlParams.delete(targetKey);
  }
  const queryString = urlParams.toString();
  // 无参数时直接返回基础路径，不带多余?
  return '/results/' + (queryString ? `?${queryString}` : '');
}

// 页面加载完成后初始化绑定
document.addEventListener('DOMContentLoaded', () => {
  const seriesSelect = document.getElementById('seasondropdown');
  const yearSelect = document.getElementById('yeardropdown');

  // 初始化下拉框选中态，自动匹配当前URL的参数值
  seriesSelect.value = getQueryParam('series');
  yearSelect.value = getQueryParam('year');

  // 绑定选择事件
  seriesSelect.addEventListener('change', function() {
    window.location.href = generateJumpUrl('series', this.value);
  });
  yearSelect.addEventListener('change', function() {
    window.location.href = generateJumpUrl('year', this.value);
  });
});

实现效果说明 #

• 支持任意顺序选择两个筛选项，已选参数会自动保留，比如先选2022年再选Modifieds，最终会跳转到/results/?year=2022&series=modifieds
• 选择"Combined"或者默认空年份选项时，会自动清除对应参数，URL不会残留冗余空值
• 页面刷新后会自动根据当前URL参数选中对应下拉选项，不需要写重复的选中判断逻辑
• 基于浏览器原生URLSearchParams实现，不需要引入额外第三方库，兼容所有主流现代浏览器

内容的提问来源于stack exchange，提问作者Chris Owens