首頁猿問將 select 的值添加到 href

將 select 的值添加到 href

JavaScript

慕村9548890 2022-05-22 16:07:00

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

查看完整描述

2 回答

慕容3067478

TA貢獻1773條經驗獲得超3個贊

你可以用 vanilla JS 做到這一點?？纯匆韵聝热荩?/p>

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;

}

<option>Selecteer onderwijssoort</option>

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

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

</select>

<option>Selecteer niveau</option>

</select>

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

<br>

<p></p>

反對回復 2022-05-22

慕妹3242003

TA貢獻1824條經驗獲得超6個贊

這是使用 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);

});

<option>Selecteer onderwijssoort</option>

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

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

</select>

<option>Selecteer niveau</option>

</select>

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

反對回復 2022-05-22

2 回答
0 關注
208 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將 select 的值添加到 href

將 select 的值添加到 href

2 回答

添加回答