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时如何制作，链接更改为：

welcome / Report？d = 2＆school_code = 1＆usr_id = 2＆year = 2018＆quater = 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>

基于2选择更改按钮链接变量

1 个答案: