Change information according to selection in select

Question

Change information according to selection in select

Navigation

#1 by (0 votes)

1

Could anyone help me with how I can change the information that is in blue in the image below, according to the selection of select (monthly, quarterly, semiannual and annual)?

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

ThecodeIhaveisthis:

<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 I have it, it only stays in one of the tables.

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

javascript html

asked by anonymous 05.07.2017 / 15:14

1 answer

php array converted to json does not maintain order in mysql Switching screens with the same XML file

score 0 · Accepted Answer

I made an example with the item you proposed.

Defines a variable named precos , it is an object that the index would be the plan code and its default monthly value, without discount;

I created a listen event of the type that when changing the value of select, updates the prices;

Define 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;

Scroll through items on the screen that have class .periodo-item ;

Retrieves which plan this item is and stores in the flat variable;

Calculate the prices of each;

I'm looking for the element that has the class .preco within .periodo-item and regardless of the price I calculate;

I fire the change event on select to set the starting price.

Notice that in HTML I put the attribute data-desconto and data-multiplicar The discount refers to the applied discount and multiply it, 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><selectid="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>