jQuery如何实现下拉选值替换URL参数并重载页面

• 你的代码每次都读取localStorage存储的初始URL拼接参数，无法覆盖已有的sort参数，只会不断追加新的参数段
• history.pushState和window.location.replace同时调用属于冗余操作：location.replace会直接重载页面，页面刷新后pushState的修改会直接失效
• 直接硬拼接?sort=没有判断URL中是否已有查询参数，容易出现多?、参数重复的异常情况

使用浏览器原生URL、URLSearchParamsAPI处理参数，set()方法天然支持「参数存在则替换、不存在则新增」的逻辑，完全匹配你的需求。

$('#drop').on('change', function(e) {
  if (typeof history.pushState === "undefined") return;
  // 基于当前页面URL构造URL对象
  const currentUrl = new URL(window.location.href);
  const selectedVal = this.value;
  // 设置sort参数，已存在则自动覆盖
  if (selectedVal) {
    currentUrl.searchParams.set('sort', selectedVal);
  } else {
    // 可选：选中默认无值选项时移除sort参数
    currentUrl.searchParams.delete('sort');
  }
  // 重载页面，如需保留历史回退记录可改为 window.location.href = currentUrl.toString()
  window.location.replace(currentUrl.toString());
});

<select id="drop">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

如果你后续不需要重载页面，只需要修改URL地址，把window.location.replace逻辑替换为pushState即可：

history.pushState({ Title: selectedVal, Url: currentUrl.toString() }, selectedVal, currentUrl.toString());

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