jquery 使用 select 中的值更改 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>

对于选择项目的每一行，我想用这个值更改 attr href ： href="url.com?"+ 从 select 中选择的选项值

我如何使用 jquery 执行此操作？

谢谢

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

您只需在更改 select 的值后更改 a 标记的 href attr 即可。您可以在此处尝试工作代码，它设置 href 属性每次选择框的值更改时都会更改链接。

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