Change information according to select

Question

Someone could assist me on how I can change the information that is in blue in the image below, according to the selection of the select (monthly, quarterly, semi-annual and annual)?

I need you to change the product value and link button:

The code I have is this:

<select class="select-ciclos" name="select" onchange="document.getElementById('selecionado').innerHTML = '' + this.value;">   
    <option value="<sup>R$</sup><span>9,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>28,77</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>54,14</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>99,99</span>/ano">Anual -16%</option>  
</select>

<div id="selecionado" class="price"><sup>R$</sup><span>9,99</span>/mês</div>

However, this way that I have, it stays only in one of the tables.

I’d like to leave a select single out of tables so that when selecting, change them all at once.

Answer 1

I made an example with item you proposed.

1. Sets a variable called precos, it is an object that the index would be the plan code and its default monthly value, no discount;
2. I created a listening event of the type that when changing the value of the select, updates the prices;
3. I defined the variables to perform the calculations, such as the item itself, the user’s choice, which is monthly, quarterly... and the discount of each one;
4. Scroll through the items on the screen that have the class .periodo-item;
5. Rescues which plane this item is and stores in the flat variable;
6. Calculation of the prices of each;
7. I look for the element that has the class .preco within the .periodo-item and I calculate the price;
8. Trigger the event change in select to set the initial price.

Note that in HTML I put the attribute data-desconto and data-multiplicar The discount refers to the discount applied and multiply it, would refer to the months, in the case of monthly 1, quarterly 3 and so on.

$(function() {

  // valores sem desconto
  var precos = {
    1: 10.00,
    2: 20.50,
    3: 31.55,
    4: 40.55
  };

  // Quando trocar...
  $("#periodo").on('change', function() {

    var periodo = this;
    var escolha = $(this).val();
    var multiplicar = $(this).find(':selected').data('multiplicar');
    var desconto = $(this).find(':selected').data('desconto');

    $.each($('.periodo-item'), function(key, value) {
      var plano = $(value).data('plano');
      var preco = precos[plano] * multiplicar;
      var preco_com_desconto = (preco - (preco / 100 * multiplicar)).toFixed(2);
      $(value).find('.preco').text(preco_com_desconto);
    });

  });

  $("#periodo").trigger('change');


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="periodo">
    <option data-desconto="0" data-multiplicar="1" value="1">Mensal</option>
    <option data-desconto="3" data-multiplicar="3" value="2">Trimestral 3% desc.</option>
    <option data-desconto="6" data-multiplicar="6" value="3">Semestral 6% desc.</option>
    <option data-desconto="12" data-multiplicar="12" value="4">Anual 12% desc.</option>
</select>
<div id="periodo-selecionado">
  <div class="periodo-item" data-plano="1">
    <h2>Plano 01</h2>
    <div class="preco"></div>
    <a class="link">Link 1</a>
  </div>
  <div class="periodo-item" data-plano="2">
    <h2>Plano 02</h2>
    <div class="preco"></div>
    <a class="link">Link 2</a>
  </div>
  <div class="periodo-item" data-plano="3">
    <h2>Plano 03</h2>
    <div class="preco"></div>
    <a class="link">Link 3</a>
  </div>
  <div class="periodo-item" data-plano="4">
    <h2>Plano 04</h2>
    <div class="preco"></div>
    <a class="link">Link 4</a>
  </div>
</div>