jquery用select中的值更改attr href答案

【问题标题】：jquery change attr href with value from selectjquery用select中的值更改attr href
【发布时间】：2011-12-09 08:16:04
【问题描述】：

我有这个表格：

<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?"+ 从选择中选择的选项值

我怎样才能用 jquery 做到这一点？

谢谢

【问题讨论】：

标签： jquery select attr

【解决方案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());
    });
});

【讨论】：

它不起作用...我必须将您的代码放入 $(document).ready(function () ?
是的，您可以使用快捷方式$(function() {...。我更新了我的答案。
我还有一个问题（也许我必须发布一个新问题，让我知道...）。如果我有 2 个这样的选择，我该怎么办：<div id="select_1"> <select class="select-class-1"> <option value="value_1" selected="selected">1</option> <option value="value_2">2</option> </select> <select class="select-class-2"> <option value="value_1">1</option> <option value="value_2" selected="selected">2</option> </select> <a href="#" class="a-class">Link</a> </div> ... 我的属性将是：url.com?x=value select1&y=value select2
让我们continue this discussion in chat

【解决方案2】：

你可以在select的值改变后简单地改变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);
});

【讨论】：