Change values according to the selected option

Question

Change values according to the selected option

Navigation

#1 by (2 votes)

1

I have a table of plans here, and it has 5 columns, for 5 plans obviously.

In each column there is a select to choose the periodicity of each plan.

According to the option selected in this select, it should change the value that is being displayed for the plan.

I tried to start a script but I could not get it to work as it should.

I'll leave the complete code below:

JAVASCRIPT:

<script>
$(function() {
  // PLANO BÁSICO US
  // preciso usar o str_replace por que o valor é obtido através de uma variável PHP
  var plano_basicoUS = {
    1: <? echo str_replace(',', '.', 11,90); ?>,
    2: <? echo str_replace(',', '.', 32,70); ?>,
    3: <? echo str_replace(',', '.', 59,40); ?>,
    4: <? echo str_replace(',', '.', 106,80); ?>,
 };


  $("#periodicidadeBasicoUS").on('change', function() {

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

    $.each($('.periodo-item'), function(key, value) {
      var plano = $(value).data('plano');
      var preco = plano_basicoUS[1] * multiplicar;

      $(value).find('.valor_original').text('R$ '+preco);
      $(value).find('.valor_desconto').text('R$ '+plano_basicoUS[2]);
      $(value).find('.valor_mensal').text(plano_basicoUS[1]);

    });

  });

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


});
</script>

HTML:

<br>
<div class="periodo-item" data-plano="1">
    <span class="valor_original"></span> <span class="valor_desconto"></span>
    <br>
    <span class="valor_mensal"></span>
</div>

    <div class="select">
        <select name="periodicidadeBasicoUS" id="periodicidadeBasicoUS">
          <option value="1">Mensal - Sem desconto</option>
          <option data-multiplicar="3" value="2">Trimestral - </option>
          <option data-multiplicar="6" value="3">Semestral - </option>
          <option data-multiplicar="12" value="4">Anual - </option>
        </select>
      </div>

I need it to do the following:

Return values with a comma instead of a point, eg R $ 11.90.

If you select the option with value 1 (monthly) it should show any text in the span with classes: original_value and discount_value and for the would be the value of plano_basicoUS[1] , for the other options the normal numeric values will be displayed.

How do I adjust the script?

Since there are many plans, if anyone knows how to simplify this code, it would be interesting, since I will need to repeat all the code for the next plan.

javascript html ajax

asked by anonymous 12.06.2018 / 20:01

1 answer

Querying database using ORDER BY kills my search Problems with array type?

score 2 · Accepted Answer

Use a ternary to display only text in the first% w_ of% s when the value of div is not select .

The ternary has this structure:

condição ? valor se for verdadeira : valor se for falsa

It would apply here:

$(value)
.find('.valor_original')
.text(escolha != 1 ? 'R$ '+preco.toFixed(2).replace(".",",") : '');
            ↑                      ↑                           ↑
//      condição          se for verdadeira,             se for falsa,
//                     insere o texto com o valor           esvazia

To format the values, you use 1 (2 decimal places and replace the period with the comma).

See:

$(function() {
  // PLANO BÁSICO US
  // preciso usar o str_replace por que o valor é obtido através de uma variável PHP
  var plano_basicoUS = {
    1: 11.90,
    2: 32.70,
    3: 59.40,
    4: 106.80,
 };


  $("#periodicidadeBasicoUS").on('change', function() {

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

    $.each($('.periodo-item'), function(key, value) {
      var plano = $(value).data('plano');
      var preco = plano_basicoUS[1] * multiplicar;
      
      $(value).find('.valor_original').text(escolha != 1 ? 'R$ '+preco.toFixed(2).replace(".",",") : ''); // ternário
      $(value).find('.valor_desconto').text(escolha != 1 ? 'R$ '+plano_basicoUS[2].toFixed(2).replace(".",",") : '');  // ternário
      $(value).find('.valor_mensal').text(plano_basicoUS[1].toFixed(2).replace(".",","));

    });

  });

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


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="periodo-item" data-plano="1">
    <span class="valor_original"></span> <span class="valor_desconto"></span>
    <br>
    <span class="valor_mensal"></span>
</div>

<div class="select">
  <select name="periodicidadeBasicoUS" id="periodicidadeBasicoUS">
    <option value="1">Mensal - Sem desconto</option>
    <option data-multiplicar="3" value="2">Trimestral - </option>
    <option data-multiplicar="6" value="3">Semestral - </option>
    <option data-multiplicar="12" value="4">Anual - </option>
  </select>
</div>