Question

I have this form :

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

For each line of select item, I want to change attr href with this value :
href=”url.com?”+ value of option selected from select

How can i do this with jquery ?

Thx

Answer 1

Am I understanding you correctly if I assume that, when the user selects an option from one of the select elements, the adjacent a element should be updated? In that case:

// 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());
    });
}

It could also be that you want to update all a elements when the document is loaded in the browser. In that case:

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