jQuery实现：三个select值变更时同步更新a标签href的URL参数

• 仅为#comune下拉框绑定了值变更事件，#nome、#eta的选中值变动不会触发href更新逻辑
• 拼接URL时只读取当前触发变更事件的下拉框值，没有同步获取另外两个下拉框的选中状态，最终生成的href会缺失对应参数

// 抽离公共的href同步逻辑，避免重复代码
function syncCercaHref() {
  // 读取三个下拉框的当前选中值
  const comuneVal = $("#comune").val();
  const nomeVal = $("#nome").val();
  const etaVal = $("#eta").val();

  // 用原生API生成规范的查询参数，自动处理特殊字符编码
  const searchParams = new URLSearchParams({
    comune: comuneVal,
    nome: nomeVal,
    eta: etaVal
  });

  // 更新a标签的href
  $("#cerca").attr("href", `/elenco-mappa.html?${searchParams.toString()}`);
}

// 为三个下拉框统一绑定变更事件，任意选中值变化时触发同步
$("#comune, #nome, #eta").on("change", syncCercaHref);

// 页面初始化时执行一次同步，保证初始href和下拉框默认值匹配
syncCercaHref();

• 公共逻辑抽离：将参数拼接、href更新的逻辑独立成函数，不需要为每个下拉框单独编写重复的拼接代码
• 批量事件绑定：通过jQuery多选择器一次性给三个select挂上同一事件监听，任意下拉框的选中值发生变化时，都会重新读取全部三个下拉框的当前值生成完整参数
• 规范参数处理：使用原生URLSearchParams构造查询字符串，自动完成特殊字符的URI编码，减少手动拼接URL的出错概率
• 初始状态对齐：页面加载完成后主动执行一次同步逻辑，保证a标签的初始href和三个下拉框的默认选中值完全匹配，避免初始点击跳转时参数丢失

补充提醒：原HTML中id为eta的下拉框第一个选项的显示文本误写为"Nome"，不影响功能运行，可根据业务语义修正为对应文本（如"Età"）。

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