Hola, me sería de bien, que me ayudaran :), tengo un combobox que lleno con php hasta ahi todo bien, el combo tiene 4 atributos en la base de datos id,nombre,descripcion y precio, cuando selecciono una opción del combo necesito que el campo se actualize,

Ejemplo:

Tengo un producto que tiene un precio de $40 y tengo un combobox que tiene diferentes sabores, cuando selecciono "fresa" el campo debe sumarse segun el precio del sabo "fresa" en este caso "fresa" cuesta $20
una vez que haga esto debe sumar amobos precio 40 + 20 = 60, y el campo debe decir 60. :)

Les dejo el codigo para que me entiendan mejor

Código Javascript :

<script>
function cargaPrecio(precio) {
document.getElementById( 'precio' ).value=precio;
}
</script>


Y el php del select :)

Código PHP :

<?php
      echo '<select name="sabores" onchange="cargaPrecio(this.value)">';
      echo '<option value="">Sabor...</option>';
      
      foreach($sabprod as $elemento2)
      {
         $sabor->idsabor=$elemento2['idsabor'];
         $sabor->obtener_sabores();
         
         if($sabor->idsabor==$elemento2['idsabor'])
         echo '<option value="'.$sabor->idsabor.'" value2="'.$sabor->precio.'">'.$sabor->nombre.'</option>';
      }
      echo '</select>';
?>


y el campo que deseo actualizar es un <h2>, hice el intento con un campo de texto y funciono pero no suma los precios :( el campo de texto funciona asi

Código HTML :

<input id="precio" name="precio" type="text" value="<?php echo $productos->precio;?>"/>


Espero puedan ayudarme muchas gracias!!! :)