Добавить значения 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

Вы можете сделать это с ванилью 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>