根据 2 个选择更改按钮链接变量

Question

我有 2 个选择，如何使按钮链接变量基于 2 个选择进行更改。 以下是我的选择

     <select id="choose_year">
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            </select>
 <select id="choose_quater">
                        <option value="q1">q1</option>
                        <option value="q2">q2</option>
                        <option value="q3">q3</option>
                        </select>

下面是链接按钮

<a id="button_year" href="welcome/Report?d=2&school_code=1&usr_id=2&year=2018"><span style="background-color: #a31aff; box-shadow: 0 2px 0 #ad33ff;color: white;padding: 3px;text-transform: uppercase;">Continue</span></a>

下面，我已经有一个用于一个选择的脚本，如何使两个选择都作为链接变量？

                    <script>
                        var sel = document.getElementById('choose_year');
                        sel.onchange = function () 
                        {
                        document.getElementById("button_year").href = "welcome/Report?d=2&school_code=1&usr_id=2&year="+this.value;
                        }
                    </script>

当我同时选择2018和Quater2时，链接将更改为：

欢迎/报告？d=2&school_code=1&usr_id=2&年份=2018&季度=Q2

Answer 1

var link = document.getElementById("button_year");
var yearChoiceElement = document.getElementById("choose_year");
var quaterChoiceElement = document.getElementById("choose_quater");
function setHref()
{
    link.setAttribute("href", "welcome/Report?d=2&school_code=1&usr_id=2&year=" + yearChoiceElement.value + "&quater=" + quaterChoiceElement.value);
  
  
    //just to make sure this actually works, let's alert the resulting href
    alert(link.href);
}

<select id="choose_year" onchange="return setHref();">
  <option value="2018">2018</option>
  <option value="2019">2019</option>
</select>
 <select id="choose_quater" onchange="return setHref();">
  <option value="q1">q1</option>
  <option value="q2">q2</option>
  <option value="q3">q3</option>
</select>
<a id="button_year" 
   href="welcome/Report?d=2&school_code=1&usr_id=2&year=2018">
  <span style="background-color: #a31aff; 
               box-shadow: 0 2px 0 #ad33ff;
               color: white;padding: 3px;
               text-transform: uppercase;">
     Continue
   </span>
</a>