Question

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

以下是示例代码：

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

我想要实现的是当用户例如选择第二个选项时，按钮链接变为http://ordernow/10/而不是http://ordernow/5/，依此类推。有人可以告诉我这是怎么做的或提供有关这个教程的链接？谢谢。

Answer 1

使用纯javascript并将id添加到某些元素：

JSFiddle

以下是JavaScript：

＆＃13;

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

＆＃13;

Answer 2

您可以收听select's onchange以获取新选择的选项的值。然后将值添加到按钮的href：

$('select').on('change', function () {
    $('#button > a').attr('href', 'http://ordernow/' + $(this).val() + '/');
});

jsfiddle DEMO

Answer 3

可以使用正则表达式来解析href的结尾，因此路径不需要知道

$('select').change(function(){
    var val =$(this).val();
    $('#button a').attr('href', function(_,href){
        var reg = /\/\d\/$/;        
        return href.replace(reg, '/'+val+'/');        
    });    
});

的 DEMO

如何选择选项更改按钮链接？

3 个答案: