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做到这一点？

THX

Answer 1

如果我认为当用户从其中一个选择元素中选择一个选项时，我是否正确理解您，应该更新相邻的 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。您可以尝试工作代码here，每次更改选择框的值时，它都会设置链接的href属性。

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

jquery使用select中的值更改attr href

2 个答案: