É por Javascript, o primeiro link que colocaste utiliza o seguinte código para mostrar os preços conforme o ciclo de pagamento:
<script>
var arrPlanosValores = {
'pl-suite-start': [
{ 'nome':'Anual', 'periodo':'1 ano', 'id':260, 'valorTotal': 99.95, 'valorMes': 8.33, 'selected':true }
],
'pl-nova-suite': [
//{ 'nome':'Trienal', 'periodo':'3 anos', 'id':103, 'valorTotal':320.40, 'valorMes': 8.90 },
//{ 'nome':'Bienal', 'periodo':'2 anos', 'id':269, 'valorTotal':237.60, 'valorMes': 9.90 },
{ 'nome':'Anual', 'periodo':'1 ano', 'id':191, 'valorTotal':154.80, 'valorMes':12.90, 'selected':true },
{ 'nome':'Semestral', 'periodo':'6 meses', 'id':190, 'valorTotal': 89.40, 'valorMes':14.90 },
{ 'nome':'Trimestral', 'periodo':'3 meses', 'id':189, 'valorTotal': 59.70, 'valorMes':19.90 },
{ 'nome':'Mensal', 'periodo':'1 mês', 'id':188, 'valorTotal': 29.90 }
],
'pl-suite-mega': [
{ 'nome':'Anual', 'periodo':'1 ano', 'id':195, 'valorTotal':238.80, 'valorMes':19.90 },
{ 'nome':'Semestral', 'periodo':'6 meses', 'id':194, 'valorTotal':149.40, 'valorMes':24.90 },
{ 'nome':'Trimestral', 'periodo':'3 meses', 'id':193, 'valorTotal': 89.70, 'valorMes':29.90, 'selected':true },
{ 'nome':'Mensal', 'periodo':'1 mês', 'id':192, 'valorTotal': 39.90 }
],
'pl-suite-plus': [
{ 'nome':'Anual', 'periodo':'1 ano', 'id':200, 'valorTotal':298.80, 'valorMes':24.90 },
{ 'nome':'Semestral', 'periodo':'6 meses', 'id':199, 'valorTotal':179.40, 'valorMes':29.90 },
{ 'nome':'Trimestral', 'periodo':'3 meses', 'id':198, 'valorTotal':104.70, 'valorMes':34.90 },
{ 'nome':'Mensal', 'periodo':'1 mês', 'id':197, 'valorTotal': 49.90, 'selected':true }
]
};
$('.planos_valores .plano_coluna').each(function(){
var $this = $(this);
var plColunaID = $.trim( $this.attr('id') );
// verifica se o id do plano existe no array de planos
var arrPeriodos = arrPlanosValores[plColunaID];
if($.type(arrPeriodos) != 'array'){ return; }
// busca os elementos para interacao
var $plSelect = $this.find('.periodo SELECT');
var $plButton = $this.find('.contratar BUTTON');
var $plHide = $this.find('.valores .hide');
var $plValorMesReais = $this.find('.valores .valor_mes_reais');
var $plValorMesCentavos = $this.find('.valores .valor_mes_centavos');
var $plValorTotal = $this.find('.valores .valor_total');
var $plPeriodo = $this.find('.valores .num_periodo');
// insere opcoes no select
$plSelect.html('');
for(var p in arrPeriodos){
var selected = (arrPeriodos[p].selected == true) ? 'selected="selected"' : '';
$plSelect.append('<option value="'+ p +'" '+selected+'>'+ arrPeriodos[p].nome +'</option>');
}
// faz o tratamento para mudanca de periodo
$plSelect.on('change', function(){
var indice = parseInt( $(this).val() );
var plano = arrPeriodos[indice];
var valorTotal = parseFloat(plano.valorTotal);
var valorMes = parseFloat(plano.valorMes);
var periodo = plano.periodo;
if(isNaN(valorTotal)){ valorTotal = 0; }
if(isNaN(valorMes)){ valorMes = 0; }
if(valorTotal <= 0){ return false; }
valorTotal = valorTotal.toFixed(2);
valorMes = valorMes.toFixed(2);
if(valorMes <= 0){
$plHide.hide();
valorTotal = number_format(valorTotal,2,',','.');
$plValorMesReais.html(valorTotal.substring(0,valorTotal.indexOf(',')));
$plValorMesCentavos.html(valorTotal.substring(valorTotal.indexOf(',')));
}else{
$plHide.show();
valorTotal = number_format(valorTotal,2,',','.');
valorMes = number_format(valorMes,2,',','.');
$plValorTotal.html(valorTotal);
$plValorMesReais.html(valorMes.substring(0,valorMes.indexOf(',')));
$plValorMesCentavos.html(valorMes.substring(valorMes.indexOf(',')));
$plPeriodo.html(periodo);
}
}).change().on('keyup',function(){ $(this).change(); });
// faz o tratamento do clique no botao
$plButton.on('click', function(){
var indice = parseInt( $plSelect.val() );
var plano = arrPeriodos[indice];
var id = parseInt(plano.id);
var url = 'https://cliente.hoteldaweb.com.br/assine_hdw.php?';
if(!isNaN(id)){
url = url +'&plano='+id;
}
document.location.href = url;
return false;
});
});
function number_format (number, decimals, dec_point, thousands_sep) {
// Strip all characters but numerical ones.
number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
</script>