How to change a <a> link according to a <select>?

Question

I’m creating a price list for my website, and I need when the person changes the payment cycle, the link be changed <a> (HIRE) to go to the cart.

Example: If the person selects the cycle Monthly, the link changes to:

http://meusite.com/carrinho.php?produto=1&periodo=mensal

If the person chooses Quarterly, the link changes to:

http://meusite.com/carrinho.php?produto=1&periodo=trimestral

If the person chooses Half-yearly, the link changes to:

http://meusite.com/carrinho.php?produto=1&periodo=semestral

And if the person chooses Yearly, the link changes to:

http://meusite.com/carrinho.php?produto=1&periodo=anual

EXAMPLE IN Jsfiddle

Answer 1

Dude I made some changes to your Fiddle to run a look there. I found it a little confusing because you were already using the value of combo options to control value writing, so I had to create an attribute in the options called "data-opt" with the values {M,T,S,A}. Another change I had to make was to put id in the links and in each select I created an attribute data-link to match each combo with its link.

It was not the most correct way to make this working more.

Answer 2

You can do it like this:

$(".select-ciclos").heapbox({
'onChange':function(value,src){

    var mostrador = $(src).closest('.pricing-column').find('.trans');
    var val = value;
    mostrador.animate({
        opacity: 0
    }, 250, function () {
        if (val == "<sup>R$</sup><span>6,99</span>/mês")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=mensal");
        }
        else if (val == "<sup>R$</sup><span>28,77</span>")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?periodo=trimestral");
        }
        else if (val == "<sup>R$</sup><span>54,14</span>")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=semestral");
        }
        else if (val == "<sup>R$</sup><span>99,99</span>/ano")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=anual");
        }
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 250)
    })
    }
});


$(document).ready(function() {
   $(".select-ciclos").heapbox();
 });

You also have to change the html of the "HIRE" link by adding an id:

<a href="http://meusite.com/carrinho.php?periodo=mensal" id="cont">

Jsfiddle

Answer 3

I think they have complicated too much, select should provide you with the value you really need, which is the periodicity, and the price is that it should come as an attribute date, and only the value without formatting...

I recommend something like this:

HTML: (only the modifications)

Change the attribute value for the periodicity and create the attribute data-preco with the price:

                <select class="select-ciclos" name="select">
                    <option value="mensal" selected="selected" data-preco="6,99">Mensal</option>
                    <option value="trimestral" data-preco="28,77">Trimestral -4%</option>
                    <option value="semestral" data-preco="54,14">Semestral -8%</option>
                    <option value="anual" data-preco="99,99">Anual -16%</option>
                </select>

Jquery:

$(".select-ciclos").heapbox({
    'onChange': function (value, src) {
        $(src).closest('.pricing-column').find('.trans').animate({
            opacity: 0
        }, 250, function () {
            $(this).children('span').html($(src).find("option:selected").attr("data-preco"));
            if (value == 'mensal') var ciclo = '/mês';
            if (value == 'anual') var ciclo = '/ano';
            $(this).html( $(this).html().replace(/<\/span>.*/g, '</span>' + (ciclo ? ciclo : '')) );
            $(this).animate({
                opacity: 1
            }, 250)
        })
        var elementolink = $(src).closest('.pricing-column').find('.pricing-footer a');
        var link = elementolink.attr("href");
        elementolink.attr("href", link.replace(/periodo\=(.+?)(&|$)/g, 'periodo=' + value + '&').replace(/&$/g, ''));
    }
});

See working on Jsfiddle