Auswahl A gibt Preis XY heraus?

[Rivers]

Moin, ich baue grade eine webseite mit Onlineshop. Ich hab soweit ein Dropdown menü mit verschiedenen Auswahlen fertig.
Ich will jetztz wenn man z.b Auf Auswahl "A" geht das sich Preis auf "20€" ändert, bei Auswahl "B" auf Preis "30€" usw.


der Code ist

</div>
<<h5 class="item_price">ab € 20.00
it BSPweiter mit BSPweiter mit BSPweiter mit BSPweiter mit BSPweiter mit BSPweiter mit BSPweiter mit BSPweiter mit BSP.</p>
<div class="available">
<ul>
<li>Aufbereitungort
<select>
<option value="A">Innen</option>
<option value="B">Außen & Innen</option>
<option>Sonderbestellung</option>
</select></li>


vielen Dank im voraus!

 

[Aaron3219]

Dies ist leider nicht mit purem CSS möglich, da man mit CSS (leider immer noch nicht) Mutterelemente ansprechen kann. Sonst wäre sowas hier denkbar:

option[value=B]:checked < option ~ p::after {
  value: "30€";
}
// < steht in diesem Falle für das ansprechen des Mutterelements.

Da dies aber nicht möglich ist, musst du wohl hier zu Javascript greifen und damit den input checken.
if(input = A), dann schreibe 20€
if(input = B), dann schreibe 30€