将 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(){&nbsp; opt1 = document.getElementsByClassName('option1')[0].value;&nbsp; opt2 = document.getElementsByClassName('option2')[0].value;&nbsp; let href ="/filter/#1="+opt1+"&2="+opt2;&nbsp; let a = document.getElementById("methodelink");&nbsp; a.setAttribute("href", href);&nbsp; let p= document.getElementsByTagName("p")[0];&nbsp; p.innerHTML = a;}<select class="option1" onchange="updateOpt()">&nbsp; &nbsp; <option>Selecteer onderwijssoort</option>&nbsp; &nbsp; <option value="basisonderwijs">Basisonderwijs</option>&nbsp; &nbsp; <option value="voortgezetonderwijs">Voortgezet onderwijs</option>&nbsp; &nbsp; <option value="nt2">NT2</option></select><select class="option2" onchange="updateOpt()">&nbsp; &nbsp; <option>Selecteer niveau</option>&nbsp; &nbsp; <option value="vmbot">VMBO T</option>&nbsp; &nbsp; <option value="havo">HAVO</option>&nbsp; &nbsp; <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(){&nbsp; selectedOption1 = $(this).val();&nbsp; $("#methodelink").attr("href","/filter/#1="+selectedOption1+"&2="+selectedOption2);});$(".option2").change(function(){&nbsp; selectedOption2 = $(this).val();&nbsp; $("#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">&nbsp; &nbsp; <option>Selecteer onderwijssoort</option>&nbsp; &nbsp; <option value="basisonderwijs">Basisonderwijs</option>&nbsp; &nbsp; <option value="voortgezetonderwijs">Voortgezet onderwijs</option>&nbsp; &nbsp; <option value="nt2">NT2</option></select><select class="option2">&nbsp; &nbsp; <option>Selecteer niveau</option>&nbsp; &nbsp; <option value="vmbot">VMBO T</option>&nbsp; &nbsp; <option value="havo">HAVO</option>&nbsp; &nbsp; <option value="vwo">VWO</option></select><a href="/filter/#1=OPTION1&2=OPTION2" id="methodelink">Start vergelijking</a>