两个window.location.href设置后参数丢失问题咨询

嘿，我完全懂你遇到的困扰——每次调用其中一个选择函数时，之前的URL参数都会被冲掉，没法同时保留projektnamn和paket两个参数对吧？这是因为你直接给window.location.href赋值新的查询字符串时，会完全替换掉原来的，而不是追加参数。另外还要纠正个小细节：你期望的URL格式里用了两个?，这其实不符合规范，正确的多参数URL应该用&分隔，比如domain.com?projektnamn=Something&paket=Something，这样PHP的$_GET才能正确解析到两个字段。

下面给你两种解决方案，优先推荐第一种现代浏览器兼容的简洁写法：

方案1：使用URLSearchParams API（推荐） #

现代浏览器都支持这个API，它能帮你轻松管理URL查询参数，不用手动拼接字符串，还自动处理编码问题：

修改后的jsFunction函数： #

function jsFunction(){
  // 获取当前URL的查询参数集合
  const params = new URLSearchParams(window.location.search);
  // 获取选中的项目名称值
  const myselect = document.getElementById("projektnamn");
  const projektnamnValue = myselect.options[myselect.selectedIndex].value;
  // 更新或添加projektnamn参数
  params.set('projektnamn', projektnamnValue);
  // 重新构建完整URL并跳转
  window.location.href = `${window.location.pathname}?${params.toString()}`;
}

修改后的services函数： #

function services(){
  const params = new URLSearchParams(window.location.search);
  const select = document.getElementById("paket");
  const paketValue = select.options[select.selectedIndex].value;
  // 更新或添加paket参数
  params.set('paket', paketValue);
  window.location.href = `${window.location.pathname}?${params.toString()}`;
}

方案2：手动解析查询参数（兼容旧浏览器如IE） #

如果需要兼容不支持URLSearchParams的旧浏览器，可以用这个手动处理的方法：

先写一个辅助函数来获取当前查询参数： #

function getCurrentQueryParams() {
  const params = {};
  // 去掉URL开头的?，分割成参数对
  const searchParts = window.location.search.slice(1).split('&');
  
  searchParts.forEach(part => {
    if (!part) return;
    const [key, value] = part.split('=');
    // 解码参数值，避免乱码
    params[key] = decodeURIComponent(value);
  });
  
  return params;
}

然后修改你的两个函数： #

function jsFunction(){
  const params = getCurrentQueryParams();
  const myselect = document.getElementById("projektnamn");
  // 更新projektnamn参数
  params.projektnamn = myselect.options[myselect.selectedIndex].value;
  
  // 重新拼接查询字符串
  const newQuery = Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');
  
  window.location.href = `${window.location.pathname}?${newQuery}`;
}

function services(){
  const params = getCurrentQueryParams();
  const select = document.getElementById("paket");
  params.paket = select.options[select.selectedIndex].value;
  
  const newQuery = Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');
  
  window.location.href = `${window.location.pathname}?${newQuery}`;
}

这样修改后，不管你先选项目名称还是套餐，两个参数都会被保留在URL里，PHP后端也能正常通过$_GET['projektnamn']和$_GET['paket']获取到值并存入数据库啦。

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