我试图用按钮创建下拉菜单。
我的代码是-
<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年。
尝试将其更改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>
Java脚本
var sel = document.getElementById('basic_plan');
sel.onchange = function () {
document.getElementById("abc").href = this.value + ".html";
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句