Jquery改变attr href的值从选择

Question

我有这样一个表单:

<div id="select_1">
<select class="select-class">
    <option value="value_1" selected="selected">1</option>
    <option value="value_2">2</option>
    <option value="value_3">3</option>
</select>
<a href="#" class="a-class">Link</a> 
</div> 
<div id="select_2">
<select class="select-class">
    <option value="value_1">1</option>
    <option value="value_2" selected="selected">2</option>
    <option value="value_3">3</option>
</select>
<a href="#" class="a-class">Link</a> 
</div>
<div id="select_3">
<select class="select-class">
    <option value="value_1" selected="selected">1</option>
    <option value="value_2">2</option>
    <option value="value_3">3</option>
</select>
<a href="#" class="a-class">Link</a> 
</div>

对于select item的每一行，我想用这个值改变attr href:href = " url.com ?

如何使用jquery实现此功能?

Thx

Answer 1

如果我假设，当用户从select元素中选择一个选项时，相邻的a元素应该更新，我是否理解正确?在这种情况下:

// jquery 1.7
$(function() {
    $("select.select-class").on("change", function() {
        var link = $(this).parent().find("a.a-class");
        link.attr("href", "url.com?" + $(this).val());
    });
}

也可能是您希望在浏览器中加载文档时更新所有a元素。在这种情况下:

$(function() {
    $("select.select-class").each(function() {
        var link = $(this).parent().find("a.a-class");
        link.attr("href", "url.com?" + $(this).val());
    });
});

Answer 2

您可以在选择值更改后简单地更改a标记的href attr。您可以在这里尝试工作代码，它在每次更改选择框的值时设置链接的href属性。

$('select.select-class').change(function(){
    alert($(this).val());
    var url = "url.com?";
    url += $(this).val();
    $(this).next().attr('href', url);
});