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

【问题标题】：How to change href link of button used with dropdown menu?如何更改与下拉菜单一起使用的按钮的 href 链接？
【发布时间】：2013-10-13 06:47:22
【问题描述】：

我正在尝试使用按钮创建下拉菜单。

我的代码是 -

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

【问题讨论】：

我已经尝试了一些东西，请查看更新后的帖子。 :)
stackoverflow.com/questions/12287672/… kevin 的帖子为我工作

标签： javascript html html-select

【解决方案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

【讨论】：

是的，效果很好。谢谢你。但是请查看我的帖子以获取更新的代码。看看你能不能回答我的疑问。
@Codestor 当您使用 = 时，您是在告诉 select 具有该值，因此您始终处于第一个 if。您应该使用== 来比较值
@Codestor，我更新了我的答案，对您的代码进行了更正和优化，请不要使用像onchange="getOpt(this)"这样的内联脚本
只是一个小的修正。如果我在 html 之前使用脚本，则 window.onload 可以代替 window.load。 :)
简单快捷的解决方案。非常感谢。

【解决方案2】：

使用 javascript 代码更改 href 属性。 javascript函数应在选择列表的onChange事件上调用，该函数将根据所选选项更改链接的href。

代码：

<select onchange="jsFunction()" id="dd">
....

</select>



function jsFunction(){

var e = document.getElementById("dd");
var strUser = e.options[e.selectedIndex].value;

// on the basiss of value of strUser change the href value
    document.getElementById("abc").href="xyz.php"; 


}

【讨论】：

【解决方案3】：

您可以使用 jQuery 来完成此任务。

工作代码：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#basic_plan').change(function(e) {
    var an = $(this).val();
    switch(an){         

case "ann": $('.button-plans a').attr('href',"google.com"); break;
case "bi": $('.button-plans a').attr('href',"yahoo.com"); break;
case "tri": $('.button-plans a').attr('href',"bing.com"); break;
            /* and so on*/
        }
});
});
</script>
</head>
<body>
<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>
</body>
</html>

【讨论】：

代码绝对有效。谢谢你。但是，我肯定很想在这篇文章中更多地了解我的疑问。检查我更新的帖子。再次感谢。