两个 window.location 不能一起工作答案

【问题标题】：Two window.location not working togeather两个 window.location 不能一起工作
【发布时间】：2020-06-30 16:44:57
【问题描述】：

我有两个函数在 url 中设置 window.location.href 标签，但是当我设置第一个然后选择另一个时，第一个消失了。那我该怎么办？这些函数的形式是选择 1. 项目名称和 2. 包。然后提交字段添加到数据库的表单 (php)。

function jsFunction(){
    var myselect = document.getElementById("projektnamn");
    window.location.href = "?projektnamn=" + myselect.options[myselect.selectedIndex].value;
}

function services(){
    var select = document.getElementById("paket");
    window.location.href = "?paket=" + select.options[select.selectedIndex].value;
}

我希望结果是这样的：

domain.com?projektnamn=Something?paket=Something

我今天得到的是：

domain.com?projektnamn=Something

或者我得到：

domain.com?paket=Something

【问题讨论】：

嗨，你能澄清一下你期望在这里发生什么吗？该变量将始终存在一个当前值，以及用户正在查看的一个当前 URL。您是否希望以某种方式组合这些 URL？
当你设置一个而不是另一个它消失了？您正在用字符串替换 url。你期待它记住projektnamn和paket吗？
所以你需要编写一些代码来使用两者来构建 url
是的，我需要一个脚本来构建 url 而不会删除另一个。

标签： javascript function url query-string

【解决方案1】：

我会将链接存储在变量中

let query = "";
function jsFunction(){
  var myselect = document.getElementById("projektnamn");
  query += "?projektnamn=" + myselect.options[myselect.selectedIndex].value;
}

function services(){
  var select = document.getElementById("paket");
  query += "?paket=" + select.options[select.selectedIndex].value;
  window.location.assign(query);
}

【讨论】：

【解决方案2】：

您的两个函数都在重置 URL。

您可以使用URLSearchParams 生成查询字符串。

function jsFunction(params) {
    var myselect = document.getElementById("projektnamn");
    params.set('projektnamn', myselect.options[myselect.selectedIndex].value);
}

function jsFunction2(params) {
    var select = document.getElementById("paket");
    params.set('paket', select.options[select.selectedIndex].value);
}

const params = new URLSearchParams();
jsFunction(params);
jsFunction2(params);
window.location.href = `${location.pathname}?${params}`;

看起来您正在尝试构建一个函数，而不是两个单独的函数。我会用一个通用函数替换这两个函数。

function jsFunction(params, id, name) {
    var myselect = document.getElementById(id);
    params.set(name, myselect.options[myselect.selectedIndex].value);
}

const params = new URLSearchParams();
jsFunction(params, "projektnamn", 'projektnamn');
jsFunction(params, "paket", 'paket');
window.location.href = `${location.pathname}?${params}`;

【讨论】：

如何将其添加到<select name="paket" id="paket" onChange="services()" class="form-control">
@Hallberg 您的问题中没有详细信息。我建议在 JavaScript 中添加事件侦听器，而不是对每个 HTML 元素的事件执行此操作。这可能会成为一个新问题的主题。
另外，您希望此重定向如何工作？当您选择一个选项时，它将立即重定向。你必须用 JavaScript 编写这个逻辑。
我每时每刻都设置一个新问题。
通过在第一个中使用window.location.href 和在第二个中使用history.pushState 和window.location.search 解决了这个问题