javascript 如何更改与下拉菜单一起使用的按钮的 href 链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19212242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change href link of button used with dropdown menu?
提问by omkarbhagat
I am trying to create drop down menu with a button.
我正在尝试使用按钮创建下拉菜单。
My code is -
我的代码是 -
<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>
Depending on what option i select from dropdown, the href value "somelink" should change. For instance if i select 1 year. href value should change from "somelink" to "google.com"
根据我从下拉列表中选择的选项，href 值“somelink”应该改变。例如，如果我选择 1 年。href 值应从“somelink”更改为“google.com”
Update:
更新：
I searched two things. 1) Changing href using javascript and 2) using onchange for select tag. It lead me to create this following piece of code.
我搜索了两件事。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>
Problem: The drop down shows 3 years by default. But if i select 2 years, it still remains 3 years.
问题：下拉菜单默认显示 3 年。但是如果我选择2年，它仍然是3年。
采纳答案by Sergio
Try this to change the hrefto the value of the selected option:
尝试将 更改href为所选选项的值：
HTML
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
Javascript
var sel = document.getElementById('basic_plan');
sel.onchange = function () {
document.getElementById("abc").href = this.value + ".html";
}
Demo here
演示在这里
回答by Sunil Kumar
You can use jQuery for this task.
您可以将 jQuery 用于此任务。
Working code:
工作代码：
<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>
回答by Tarang
Use javascript code to change the href attribute. The javascript function should be called on onChange eventof select list and the function will change the href of the link according to the selected option.
使用 javascript 代码更改 href 属性。javascript 函数应在 onChange eventof select list 上调用，该函数将根据所选选项更改链接的 href。
Code:
代码：
<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";
}
