3

Alguém poderia me auxiliar em como eu possa alterar as informações que estão em azul na imagem abaixo, de acordo com a seleção do select (mensal, trimestral, semestral e anual)?

Eu preciso que mude o valor do produto e o link do button:

inserir a descrição da imagem aqui

O código que eu tenho é esse:

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

Porém, dessa forma que eu tenho, ele fica apenas em uma das tabelas.

Gostaria de deixar um select único fora das tabelas para que ao selecionar, altere todas de uma vez.

4
  • Bem-vindo! Para que alguém se interesse a te responder, siga as orientações desse post pt.meta.stackoverflow.com/questions/5483/…
    – user60252
    5/07/2017 às 14:36
  • Para cada item no select haverá valores diferentes na tabela? Como serão definidos esses valores? Vem de um banco de dados? São calculados pelo JavaScript?
    – Woss
    5/07/2017 às 15:27
  • Anderson, os valores podem ser definidos através de um Javascript, onde ao selecionar o valor "trimestral" por exemplo, no select, ele exibe o valor correspondente que está no js na tabela de planos, conforme ilustração que deixei acima
    – Igor Bueno
    5/07/2017 às 15:48
  • Posso deixar como exemplo: infolink.com.br/hospedagem-de-sites
    – Igor Bueno
    5/07/2017 às 15:52

1 Resposta 1

2

Fiz um exemplo com item que propôs.

  1. Define uma variável chamada precos, ela é um objeto que o índice seria o código do plano e o seu valor mensal padrão, sem desconto;
  2. Criei um evento de escuta do tipo que quando alterar o valor do select, atualiza os preços;
  3. Defini as variáveis para realizar os cálculos, como o próprio item, a escolha do usuário, que é mensal, trimestral... e o desconto de cada um;
  4. Percorre os itens da tela que possuem a classe .periodo-item;
  5. Resgata qual plano este item é e armazeno na variável plano;
  6. Cálculo os preços de cada um;
  7. Procuro pelo elemento que tem a classe .preco dentro do .periodo-item e seto o preço calculo;
  8. Disparo o evento change no select para setar o preço inicial.

Perceba que no HTML coloquei o atributo data-desconto e data-multiplicar O desconto refere ao desconto aplicado e o multiplicar, seria referente aos meses, no caso de mensal 1, trimestral 3 e assim sucessivamente.

$(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>

3
  • Muito obrigado! Ainda me ajudou com o cálculo de desconto. Era mais do que eu queria, excelente mesmo!
    – Igor Bueno
    5/07/2017 às 17:41
  • Por nada @IgorBueno. Tentei fazer da forma mais simples possível, que bom que lhe ajudou. ;) 5/07/2017 às 17:45
  • Como ficaria para colocar um select para cada div?
    – Clebson
    13/06/2018 às 0:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .