将 url 参数替换为 jquery 中选定的列表值

如何解决将 url 参数替换为 jquery 中选定的列表值

我遇到了任何问题，我有一个选择列表，当用户从选择列表中选择选项时，我希望将该值附加到 url 并重新加载页面，但是当我再次选择另一个选项时，我希望该值替换为 url 中的新值并重新加载页面。我为此使用 pushstate，但是当我重新加载页面时，它不会替换它只是向 url 添加新值

这是我的代码：

 let url = location.href;
localStorage.setItem("url",url);
$('#drop').on('change',function(e) {
  if (e.handled !== true) {
    e.handled = true;

    if (typeof(history.pushState) != "undefined") {
      //get the url
      let newURL = localStorage.getItem("url") + '?sort=' + this.value;
      let title = this.value;
      let obj = {
        Title: title,Url: newURL
      };

      console.log("url ",newURL);
      history.pushState(obj,obj.Title,obj.Url);
      window.location.replace(newURL);
    }

  }
});
<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 和 URLSearchParams API。

简化示例：

$('#drop').on('change',function(e) {
  let url = new URL(location.href);
  console.clear()
  console.log('Current URL:',url)

  if (e.handled !== true) {
    e.handled = true;

    if (typeof(history.pushState) != "undefined") {
      let params = new URLSearchParams(url.search);
      params.delete('sort')
      params.append('sort',this.value)
      url.search = params;
      console.log('Updated URL:',url)

      history.pushState(null,null,url);
      //window.location.replace(newURL);*/
    }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>