Skip to main content
2 de 2
Formatação. Incorporação de código em site externo (fiz download do script.html).

Select com transição na alteração com onchange

Como adicionar um efeito de transição (fade) em um select com onchange, que quando o objeto <div> for alterado o mesmo ocorra uma transição?
Abaixo segue um print da tabela que foi feita:

Print Tabela

E este é o script:

<meta charset="utf-8" />
<!-- Isto é a seleção de planos, basta adicionar em qualquer lugar para que o usuario selecione o plano 
Atenção! Em value coloque o valor do plano -->

<p> 
<select name="select" onchange="document.getElementById('selecionado').innerHTML = 'R$ ' + this.value;">  
     <option value="nenhum|" selected="selected">Selecione:</option>  
    <option value="10,00">Mensal</option>
    <option value="11,00">Trimestral</option>  
    <option value="12,00">Semestral</option>
    <option value="13,00">Anual</option>  
  </select>  
</p>  

<p id="selecionado">
    O valor padrão
</p>   <!-- Acrescente este código aonde você quer que o texto seja trocado -->

<!-- Como criar uma outra seleção:

Basta trocar o nome em:
<select name="select" onchange="document.getElementById('selecionado').innerHTML = 'R$ ' + this.value;">  
Este código você troca esta parte que estará em maiusculo:
<select name="select" onchange="document.getElementById('TROCAR ESTA PALAVRA PARA UMA OUTRA QUALQUER').innerHTML = 'R$ ' + this.value;"> 
E aí coloque o código de seleção:
<p id="selecionado"></p> 
Troque a palavra que "selecionado" para o mesmo que você colocou no primeiro código.
-->

Quero que quando a pessoa alterar o ciclo de pagamento no select, ele mude o preço só que com um fade, porque do jeito que está, ele muda na hora. Eu quero tipo um fade neste exemplo: ao clicar para alterar ocorre um fade ( transição ) nos preços, e não apenas muda.

Só que na minha tabela não vai ser um único select, ele vai ter vários cada plano com um, como mostrado na imagem acima.

Alexandre Lopes
  • 2,8mil
  • 6
  • 33
  • 53