如何根据下拉选择更新（附加到）href？

Question

How can append to an href link a value based on a dropdown selection?

Example :

<option value="100" selected="selected">MyList</option>

And a hyperlink like:

<a href="www.mysite.com/insert/place_where_insert_the_selected_value"></a>

So the link will be :

<a href="www.mysite.com/insert/100"></a>

Thanks for your support

I tried

$('#IdMenuToEdit').change(function() {

    var id = $( "#IdMenuToEdit option:selected" ).val();
    var href = $('a.with-tip[name="DeleteMenu"]').attr("href");

    $('a.with-tip[name="DeleteMenu"]').attr('href',href+"/"+id);



});

it works but not very elegant

Answer 1

Something like that:

var valselected = $('select option:selected').val();
$('a').attr('href','www.mysite.com/insert/'+valselected);

Its something like that, i could give more complete answer if you give more complete code. To be more precise this code need some "id" or "name" from the components like combobox and

Answer 2

Try:

change_link();

$("select").change(function(){
    change_link();
});
function change_link(){
    var val = $("select option:selected").val();
    $("a").each(function(){
        var nhref = "";
        var href = $(this).attr("href").split("/");
        for(var i=0;i<href.length-1;i++){
            nhref += href[i]+"/";
        }
        nhref += val;
        $(this).attr("href",nhref);
    });
}

DEMO here.

Answer 3

This would be a more efficient approach:

let your html be like this:

<select id="mycombo">
<option value="100" selected="selected">MyList</option>
... 
</select> 
 <a id="mylink" href="www.mysite.com/insert/"></a>

now, you capture combo's change event, then you change link href depending on the selected value. The first time, you save the base_href, to avoid to compute it each time.

var base_href="";
$('#mycombo').on('change', function() {
   var value=$(this).val();
    if (base_href=="")
        base_href = $("#mylink").attr("href");
   $("#mylink").attr("href",base_href+value);
 });