JS修改URL参数求助：避免重复追加，仅保留最新参数值

你的问题核心在于每次执行myFunction时，都是从当前的<a>标签href中获取值并追加新参数，但没有保留最初的基础URL。这就导致每次切换选项时，参数会不断叠加在已有URL后面，而不是替换成最新的参数组合。

另外你的代码里还有个小错误：在拼接URL时用了type1form和type2form，但实际定义的变量是type1和type2，这会导致未定义错误。

我们需要在页面加载时就预先保存所有<a>标签的原始基础URL，之后每次更新都基于这个原始URL拼接最新的参数，而不是使用当前已被修改过的href值。

修改后的完整代码如下：

<select id="type1form" onchange="myFunction()">
  <option value="000">000</option>
  <option value="111">111</option>
  <option value="222">222</option>
</select>
<select id="type2form" onchange="myFunction()">
  <option value="AAA">AAA</option>
  <option value="BBB">BBB</option>
  <option value="CCC">CCC</option>
</select>
<div id="logodiv">
  <a href="http://test.com/redir.php?"><img src="logo1.jpg"></a>
</div>
<div id="logodiv">
  <a href="http://test.com/redir.php?"><img src="logo2.jpg"></a>
</div>
<script>
// 页面加载时保存所有原始基础URL
const originalLinks = Array.from(document.querySelectorAll("#logodiv a")).map(a => a.href);

function myFunction() {
  const type1 = document.getElementById("type1form").value;
  const type2 = document.getElementById("type2form").value;
  const logoDivs = document.querySelectorAll("#logodiv");
  
  // 遍历每个logodiv，用原始URL拼接最新参数
  logoDivs.forEach((div, index) => {
    const aTag = div.querySelector("a");
    aTag.href = `${originalLinks[index]}&type1=${type1}&type2=${type2}`;
  });
}
</script>

• 保存原始URL：在脚本初始化时就获取所有<a>标签的初始href，存入originalLinks数组，确保每次更新都基于干净的基础URL。
• 简化DOM操作：用querySelector直接获取<a>标签，避免依赖childNodes[1]这种容易出错的索引（比如节点顺序变化会导致错误）。
• 修正变量名错误：把拼接时的变量改成正确的type1和type2。
• 使用现代JS语法：用Array.from和forEach让代码更简洁易读。

这样无论你切换多少次选项，URL都会始终只保留最新的type1和type2参数，不会出现重复叠加的问题。

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