javascript - 如何更改与下拉菜单一起使用的按钮的 href 链接？

Question

我正在尝试创建带有按钮的下拉菜单。

我的代码是 -

<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="tri"> 3 Years - Rs. 100/month </option>
<option value="bi"> 2 Years - Rs. 200/month </option>
<option value="ann"> 1 Year - Rs. 100/month </option>
</select>
</div>

<div class="button-plans">
<a href="somelink"> Order now </a>
</div>

根据我从下拉列表中选择的选项，href 值“somelink”应该更改。例如，如果我选择 1 年。 href 值应从“somelink”更改为“google.com”

更新:

我搜索了两件事。 1)使用javascript更改href，2)使用onchange选择标签。它引导我创建了以下这段代码。

<script>

function getOpt(period) {

    if (period.value = "tri") { document.getElementById("abc").href="tri.html"; }
    else if (period.value = "bi") { document.getElementById("abc").href="bi.html"; }
    else { document.getElementById("abc").href="ann.html"; } 
 }

</script>

<div class="dropdown-plans">

<select id="basic_plan" name="bill_cycle" onchange="getOpt(this)">

<option value="tri"> 3 Years - Rs. 100/month </option>
<option value="bi"> 2 Years - Rs. 200/month </option>
<option value="ann"> 1 Year - Rs. 100/month </option>

</select>

</div>

<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>

问题:下拉列表默认显示 3 年。但如果我选择2年，它仍然是3年。

Answer 1

尝试将 href 更改为所选选项的值:

HTML

<div class="dropdown-plans">
    <select id="basic_plan" name="bill_cycle">
        <option value="tri">3 Years - Rs. 100/month</option>
        <option value="bi">2 Years - Rs. 200/month</option>
        <option value="ann">1 Year - Rs. 100/month</option>
    </select>
</div>
<div class="button-plans">
    <a id="abc" href="something"> Order now </a>
</div>

Javascript

var sel = document.getElementById('basic_plan');
sel.onchange = function () {
    document.getElementById("abc").href = this.value + ".html";
}

演示 here