将 select 的值添加到 href

Question

我有 2 个选择框。我希望这些字段的输出更改链接的 href 属性。<select class="option1">    <option>Selecteer onderwijssoort</option>    <option value="basisonderwijs">Basisonderwijs</option>    <option value="voortgezetonderwijs">Voortgezet onderwijs</option>    <option value="nt2">NT2</option></select><select class="option2">    <option>Selecteer niveau</option>    <option value="vmbot">VMBO T</option>    <option value="havo">HAVO</option>    <option value="vwo">VWO</option></select><a href="/filter/#1=OPTION1&2=OPTION2" id="methodelink">Start vergelijking</a>

Answer 1

你可以用 vanilla JS 做到这一点。看看以下内容：

let opt1, opt2;

function updateOpt(){

  opt1 = document.getElementsByClassName('option1')[0].value;

  opt2 = document.getElementsByClassName('option2')[0].value;

  let href ="/filter/#1="+opt1+"&2="+opt2;

  let a = document.getElementById("methodelink");

  a.setAttribute("href", href);

  let p= document.getElementsByTagName("p")[0];

  p.innerHTML = a;

}

<select class="option1" onchange="updateOpt()">

    <option>Selecteer onderwijssoort</option>

    <option value="basisonderwijs">Basisonderwijs</option>

    <option value="voortgezetonderwijs">Voortgezet onderwijs</option>

    <option value="nt2">NT2</option>

</select>

<select class="option2" onchange="updateOpt()">

    <option>Selecteer niveau</option>

    <option value="vmbot">VMBO T</option>

    <option value="havo">HAVO</option>

    <option value="vwo">VWO</option>

</select>

<a href="/filter/#1=OPTION1&2=OPTION2" id="methodelink">Start vergelijking</a>

<br>

<p></p>

Answer 2

这是使用 jQuery 的解决方案：

var selectedOption1, selectedOption2 = "";

$(".option1").change(function(){

  selectedOption1 = $(this).val();

  $("#methodelink").attr("href","/filter/#1="+selectedOption1+"&2="+selectedOption2);

});

$(".option2").change(function(){

  selectedOption2 = $(this).val();

  $("#methodelink").attr("href","/filter/#1="+selectedOption1+"&2="+selectedOption2);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="option1">

    <option>Selecteer onderwijssoort</option>

    <option value="basisonderwijs">Basisonderwijs</option>

    <option value="voortgezetonderwijs">Voortgezet onderwijs</option>

    <option value="nt2">NT2</option>

</select>

<select class="option2">

    <option>Selecteer niveau</option>

    <option value="vmbot">VMBO T</option>

    <option value="havo">HAVO</option>

    <option value="vwo">VWO</option>

</select>

<a href="/filter/#1=OPTION1&2=OPTION2" id="methodelink">Start vergelijking</a>