I have a page with several boxes containing some information and the price of the product, a URL and a select, when the person select a different option in the select the price of the product will be changed. I searched the internet and found some examples that might work, however it worked only in one block.
For example, on this server 01, you have this value of 30 and a URL, but when you select the linux option this change value and also the URL.
.boxe{
float:left;
border: solid 1px #ccc;
margin:15px;
padding:15px;
min-width:135px;
text-align:center
}
.boxe .valor{
font-size:18px;
margin: 15px 0;
font-weight:700;
}
.boxe .url{
display:block;
margin-top:15px;
}
<div class="boxe">
<span class="nomePtoduto">
Servidor 01
</span>
<div class="valor" data-vl="30" data-vl-w="35">30</div>
<select>
<option>Linux</option>
<option>Windows</option>
</select>
<span class="url">
<a href="linux.html" data-url="linux.html" data-url-w="windows.html">Comprar</a>
</span>
</div>
<div class="boxe">
<span class="nomePtoduto">
Servidor 02
</span>
<div class="valor" data-vl="45" data-vl-w="50">45</div>
<select>
<option>Linux</option>
<option>Windows</option>
</select>
<span class="url">
<a href="linux.html" data-url="linux.html" data-url-w="windows.html">Comprar</a>
</span>
</div>
<div class="boxe">
<span class="nomePtoduto">
Servidor 03
</span>
<div class="valor" data-vl="50" data-vl-w="55">50</div>
<select>
<option>Linux</option>
<option>Windows</option>
</select>
<span class="url">
<a href="linux.html" data-url="linux.html" data-url-w="windows.html">Comprar</a>
</span>
</div>