Add values of select to a href

Question

I've 2 select boxes. I want that the output of those fields, change the href attibute of the link.

<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>

Welcome to Stack Overflow! Please read through the [help center](https://stackoverflow.com/help), in particular [How do I ask a good question?](/help/how-to-ask) Your best bet here is to do your research, [search](/help/searching) for related topics on SO, and give it a go. If you get stuck and can't get unstuck after doing more research and searching, post a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your attempt and say specifically where you're stuck. People will be glad to help. — palaѕн, Mar 16 '20 at 15:09
Does this answer your question? [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) Additionally https://stackoverflow.com/questions/5416767/get-selected-value-text-from-select-on-change/47495878 — WOUNDEDStevenJones, Mar 16 '20 at 15:10
Show us what you've tried. Also, take a look at the following: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event — Ed T., Mar 16 '20 at 15:10

score 0 · Answer 1 · answered Mar 16 '20 at 15:12

Here is a solution using 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>

AbdurrahmanY · Answer 2 · 2020-03-16T15:24:24.847

You can do this with vanilla JS. Take a look at following:

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>

Add values of select to a href

2 Answers2