input - 根据下拉值更改链接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>

所有三个下拉菜单都是必需的

标签： inputhyperlinkhrefdropdownonchange

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>