javascript - Js 获取 URL 并根据 select form 更改其参数

Question

我有以下表单和一个 Js 代码，用于从“logodiv”div 获取当前 url，并将用户提交的数据表单附加到该 div 内的 url 中:

<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>
function myFunction() {

  var mylinks = [];
    var mylogo = document.querySelectorAll("#logodiv");
    for(var j = 0; j < mylogo.length; j++) {
        mylinks[j] = mylogo[j].childNodes[1].href;
    }

  var type1 = document.getElementById("type1form").value;
  var type2 = document.getElementById("type2form").value;

  for(var i = 0; i < mylogo.length; i++) {
    mylogo[i].childNodes[1].href = mylinks[i] + "&type1=" + type1form + "&type2=" + type2form;
   }

}
</script>

我的问题是在最后一个循环代码中，每次我点击表单时，url 都没有改变，但它附加了表单数据。所以 url 变成了这样:

test.com/redir.php?type1=000&type2=AAA

如果选择的字段被点击两次或更多次，url 会变成这样:

test.com/redir.php?type1=000&type2=AAA&type1=111&type2=BBB

我希望 url 只包含用户提交的最后一个 type1 和 type2 参数，而不是无限地在 url 末尾附加参数。

你能帮帮我吗？

Answer 1

做了一些修改使其工作，你可以在这里检查它们: https://jsfiddle.net/x07cqd3z/1/

首先，id 应该是唯一的，所以 logodiv 现在是一个类。

其次，您的代码中存在一些已修复的错误。

我的解决方法是每次都使用 url base(“？”之前的所有内容)来仅附加一次参数。

代码:

<select id="type1" onchange="myFunction()">
 <option value="000">000</option>
 <option value="111">111</option>
 <option value="222">222</option>
</select>

<select id="type2" onchange="myFunction()">
 <option value="AAA">AAA</option>
 <option value="BBB">BBB</option>
 <option value="CCC">CCC</option>
</select>

<div class="logodiv">
    <a href="http://test.com/redir.php?"><img src="logo1.jpg"></a>
</div>
<div class="logodiv">
    <a href="http://test.com/redir.php?"><img src="logo2.jpg"></a>
</div>
<script>
function myFunction() {

  var mylinks = [];
    var mylogo = document.querySelectorAll(".logodiv");
    for(var j = 0; j < mylogo.length; j++) {
        mylinks[j] = mylogo[j].childNodes[1].href;
    }

  var type1 = document.getElementById("type1").value;
  var type2 = document.getElementById("type2").value;


  for(var i = 0; i < mylogo.length; i++) {
    mylogo[i].childNodes[1].href = mylinks[i].substring(0,  mylinks[i].indexOf('?') + 1) + "&type1=" + type1 + "&type2=" + type2;
   }

}
</script>