Change content according to select option

Navigation
-1

Someone could help me in how I can change the information that is in blue in the image below, according to select selection (monthly, quarterly, semiannual and annual).

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

ThecodeIhaveisthis:

<selectclass="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 outside of the tables so that when selecting, change all at once.

    
asked by anonymous 05.07.2017 / 17:09

1 answer

0

First try assigning an id for each option, so it's easier to access them by javascript. Then assign Ids to the content too (for example h1 id="meuh1") and leave those contents hidden, then try something like this: 

$"#optionID".select(function(){
  $"#meuh1".show();
  });

I hope it helps ...

    
05.07.2017 / 21:02
Sql calculates date instead of insert Highlight in SMS excerpt