Change content according to select option

Question

Someone could assist me on how I can change the information that is in blue in the image below, according to the selection of the select (monthly, quarterly, semi-annual and annual).

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

The code I have is this:

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

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

Answer 1

First try to assign an id to each option, so it is easier to access them by javascript. Then assign Ids to the content as well (for example H1 id="meuh1") and leave this content hidden, then try something like this:

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

I hope it helps...