How to change a link to according to a select?

I think it's too complicated, the select should give you the value you really need, which is the periodicity, and the price should come as a date attribute, and just the unformatted value ...

I recommend something like this:

HTML: (modifications only)

Change the value attribute to the periodicity and create the data-preco attribute 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

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 combos options to control the writing of the value, so I had to create an attribute in the options called " data-opt " with values {M, T, S, A). Another change I had to make was to put id in the links and in each select I created a data-link attribute to match each combo with its respective link.

It was not the right way to do more.

You can do 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 "CONTRACT" link by adding an id:

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

JSFiddle