如何使选项选择更改按钮链接？ [英] How to make option selection change button link?

问题描述

我有一个下拉列表和一个按钮。我想让选择列表反映在按钮链接上。

示例JSFiddle

以下是示例代码：

 < select style =float：left;> 
< option value =5> $ 5.00每月< / option> 
< option value =10>每月$ 10.00< / option> 
< option value =15> $ 15.00每月< / option> 
< option value =20>每月$ 20.00< / option> 
< / select> 
 
< div id =buttonstyle =width：100px; height：30px; float：left; background：#ccc; line-height：30px; text-align：center; margin： auto 5px;> 
< a href =http：// ordernow / 5 />订单< / a> 
< / div> 
  

我想要实现的是当用户例如选择第二个选项时，按钮链接变为 http：// ordernow / 10 / 而不是 http：// ordernow / 5 / 等。有人能告诉我这是怎么做的，或者提供了关于这个教程的链接？谢谢。

解决方案

使用纯javascript和一些元素添加id：

JSFiddle

这里是JavaScript：

  document.getElementById（subscription）。onchange = function（）{document.getElementById（order-btn）。href =http：// ordernow /+ THIS.VALUE + /; }  

I have a drop down list and a button. I want to make the selection of list reflects on the button link.

Example JSFiddle

Here is the example code:

<select style="float:left;">
<option value="5">$5.00 monthly</option>
<option value="10">$10.00 monthly</option>
<option value="15">$15.00 monthly</option>
<option value="20">$20.00 monthly</option>
</select>

<div id="button" style="width:100px;height:30px;float:left;background:#ccc;line-height:30px;text-align:center;margin:auto 5px;">
<a href="http://ordernow/5/">Order</a>
</div>

What I want to achieve is when the user for example selects the second option, the button link changes to http://ordernow/10/ instead of http://ordernow/5/ and so on. Can someone inform me how do that or provide a link for a tutorial regarding this? Thank you.

解决方案

Using pure javascript and adding ids to some of the elements:

JSFiddle

Here's the JavaScript:

document.getElementById("subscription").onchange = function() {
    
    document.getElementById("order-btn").href = "http://ordernow/"+this.value+"/";
    
}

这篇关于如何使选项选择更改按钮链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！