根据下拉值更改链接href

Question

我有一个带有href链接的按钮：

<a href="mysite.com/filter">My button</a>

然后我有3个下拉（选择）输入，我们称它们为A，B和C

根据用户的选择，我希望以此更改链接

<a href="mysite.com/filter-A-B-C">My button</a>

所有三个下拉列表都是必需的

Answer 1

找到以下有用的代码段。处理查询参数的默认值。

<select id="a" onchange="changeUrl()">
  <option value="a1">a1</option>
   <option value="a2">a2</option>
</select>

<select id="b" onchange="changeUrl()">
  <option value="b1">b1</option>
   <option value="b2">b2</option>
</select>

<select id="c" onchange="changeUrl()">
  <option value="c1">c1</option>
   <option value="c2">c2</option>
</select>

 <a id="test" href="mysite.com">My button</a>
  <script>
  function changeUrl(){
  let url="mysite.com?a=";
  let a= document.getElementById('a').value;
  url+=a+"&b=";
  let b=document.getElementById('b').value;
  url+=b+"&c=";
  let c=document.getElementById('c').value;
  url+=c;
  document.getElementById('test').href=url;
  }
  </script>
</body>